目录
问题
遇到修改placeholder的颜色的需求
解决办法
改变placeholder的颜色
input::placeholder {
color: green;
}
改变input的文字的颜色
input {
color: red;
}
兼容
首先IE9及以下不支持placeholder。
IE10
input:-ms-input-placeholder {
color: green !important;
}
Chrome 、Safari等
/* - Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile >12
- Android Browser 2.1-4.4.4
- Samsung Internet
- UC Browser for Android
- QQ Browser */
::-webkit-input-placeholder {
color: #ccc;
font-weight: 400;
}
Firefox 4-18
/* Firefox 4-18 */
:-moz-placeholder {
color: #ccc;
font-weight: 400;
}
Firefox 19-50
/* Firefox 19-50 */
::-moz-placeholder {
color: #ccc;
font-weight: 400;
}
Internet Explorer 10–11、Internet Explorer Mobile 10-11
/* - Internet Explorer 10–11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
color: #ccc !important;
font-weight: 400 !important;
}
Edge
/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
color: #ccc;
font-weight: 400;
}
CSS Working Draft
/* CSS Working Draft */
::placeholder {
color: #ccc;
font-weight: 400;
}
参考链接:
[1]https://juejin.im/entry/5bce92196fb9a05d25681886
码字不易,留下足迹!!!