H5表单中placeholder属性的字体颜色问题

最近做项目的时候遇到的一些小样式问题，有关表单。并且在接下来几天的面试人中五个人都没有回答上来，改变placeholder属性的默认字体颜色，感觉有必要总结一下。

如何改变默认字体的颜色？

@blue: #026b9c;

input {
width: 100%;
height: 74/30rem;
line-height: 74/30rem;
color: @blue;
border-radius: 16/30rem;
border: 1px solid @blue_light;
font-size: 28/30rem;
padding-left: 15/30rem;
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: @blue;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: @blue;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: @blue;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: @blue;
}

主要是通过伪元素+私有前缀这种方式实现，具体实现机制暂时不甚了解，存在兼容性问题。。。当我问这个问题的时候，希望有更好的办法？不过好多人把input的color，甚至于background-color都搞混淆了，好尴尬。

巴特西

H5表单中placeholder属性的字体颜色问题

最新文章

热门文章