如何自定义设置placeholder文本的颜色?

浏览器自带的placeholder一般文字颜色是灰色,大多数情况都是ok的,但也有极少数情况需要去更改placeholder文字颜色,当然设置css color属性是不可以的。
大概有两种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)。

::-webkit-input-placeholder @ WebKit和Blink使用伪元素
:-moz-placeholder @ Mozilla Firefox 4-18使用伪类
::-moz-placeholder @ Mozilla Firefox 19+ 使用伪元素
:-ms-input-placeholder IE10使用伪类

如何自定义设置placeholder文本的颜色?

因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定。

::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }

PS: 如果是自己写的placeholder,则完全不用动担心这些问题,一般的策略就是在文本框上面覆盖一个元素,想怎么设置就怎么设置。

相关阅读