如何修改输入框占位字体样式
比如 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 的样式了，利用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);
}
实现效果：
