Html5使用CSS修改输入框的placeholder颜色

时间:2021-09-29 17:49:53

这里需要使用伪元素的方式对input的placeholder设置样式,且不同的浏览器伪元素不一样。

兼容多个浏览器的方法:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #eee;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #eee;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #eee;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #eee;
}

::placeholder { /* 大部分现代浏览器支持*/
   color:    #eee;
}

其中在firefox需要加上opacity:1