如何修改输入框占位字体样式

 

比如 ui 设计稿给定的输入框的占位字体样式是 #ccc;那么我们就需要修改占位字体的样式了，比如下面的 html 代码：

 

<input placeholder="请输入数字" />

 

具体的 css 样式如下：

 

input::-webkit-input-placeholder{

 

    color: #ccc;

 

}

 

input::-moz-placeholder{   /* Mozilla Firefox 19+ */

 

    color: #ccc;

 

}

 

input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */

 

    color: #ccc;

 

}

 

input:-ms-input-placeholder{  /* Internet Explorer 10-11 */

 

    color: #ccc;

 

}

 

介绍：介绍： 乐学高考，助力于高考复习冲刺，名师阵容豪华，有口皆碑 引导语： 其实比起自己埋头努力，找一门合格高质量的网课能让备战高考的学子事半功倍，在我体验过的网课中，我很推荐乐学家的，质量非常高，而且还有李政老师这样的资深教师，真的对高考备考很有用，有兴趣的小伙伴可以点击下方卡片免费领取课程试听一下哦——

 

如何修改 checkbox, radio 样式

 

就比如我们设计稿的样式跟原生的效果是不太一样的时候，这个时候我们就需要修改我们的 checkbox, radio 的样式了，利用CSS 修改input=radio的默认样式(改成选择框)：

 

<input id="item2" type="radio" name="item">

 

<label for="item2"></label>

 

css 样式如下：

 

input[type="radio"] {

 

     opacity: 0; //设置透明度，隐藏原有input样式

 

}

 

label {

 

     position: absolute;

 

     left: 90%;

 

     top: 10px;

 

     width: 20px;

 

     height: 20px;

 

     border: 1px solid #999;

 

}

 

input:checked+label { 

 

     // 相邻同胞选择器，选择被选中的input标签后  第一个label标签 ［input  和 label标签有共同的父元素］；

 

     background-color: #ff3334;

 

     border: 1px solid #ff3334;

 

}

 

css样式会应用在紧随着 "勾选的input元素" 后面（同级）的 " label元素的：after "上。 也就是说，input框如果被用户勾选了，其后面的label元素会有相应的样式变化

 

input:checked+label::after {

 

  position: absolute;

 

  content: "";

 

  width: 5px;

 

  height: 10px;

 

  top: 3px;

 

  left: 6px;

 

  border: 2px solid #fff;

 

  border-top: none;

 

  border-left: none;

 

  transform: rotate(45deg);

 

}