修改placeholder样式 - css篇

问题

遇到修改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

码字不易，留下足迹！！！