使用 CSS 更改 HTML5 输入的占位符颜色

李鸿文

Chrome 支持元素上的占位符属性input[type=text](其他人也可能支持)。
" F& a3 `  k! U3 \  r但是以下 CSS 对占位符的值没有影响：

input[placeholder],[placeholder],*[placeholder]    color: red !important;}

但Value仍将保留grey而不是red。
有没有办法改变占位符文本的颜色？
0 h2 D9 K2 i2 w  s! h- _  S) B                                                               
    解决方案:                                                               
: i% s! p: d$ y                                                                有伪元素、伪类和空三种不同的实现。
! r  \* o5 O) h" W6 @: yWebKit、Blink（Safari、Google Chrome、Opera 15 ）和 Microsoft Edge 正在使用伪元素：::-webkit-input-placeholder. [参考]
% s1 o! v' Z9 P2 C6 [Mozilla Firefox4-18使用伪类：-moz-placeholder（一个冒号)。
% e6 \/ I9 |, [8 f! @& v* {Mozilla Firefox 正在使用假元素： ：-moz-placeholder，但是旧的选择器将工作一段时间。[参考]
Internet Explorer 10 和 11 使用伪:-ms-input-placeholder. [参考]
2017年 4月：大多数现代浏览器都支持简单的伪元素：placeholder [参考]Internet Explorer 9 和更低版本根本不支持placeholder属性，而Opera 12 和较低版本不支持任何用于占位符的 CSS 选择器。
! e, c( u2 e# v关于最佳实现的讨论仍在继续。请注意，伪元素就像Shadow DOM真实元素padding上input背景色和伪元素不会相同。
CSS 选择器用户代理需要忽略带有未知选择器的规则。请参考选择器级别 3:
一组包含无效选择器的选择器无效。
! _. T9 S& m+ I& r( i因此，我们需要为每个浏览器制定单独的规则。否则，整个组将被所有浏览器忽略。
) U1 Q  i) d& D' F  f

::-webkit-input-placeholder { /* WebKit,Blink,Edge */    color:    #909;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */   color:    #909;   opacity: 1：-moz-placeholder { /* Mozilla Firefox 19  */   color:    #909;   opacity:  1;}:-ms-input-placeholder { /* Internet Explorer 10-11 */   color:    #909;}::-ms-input-placeholder { /* Microsoft Edge */   color:    #909;}::placeholder { /* Most modern browsers support this now. */   color:    #909;}
% v: J- m6 j% u3 C, ~" g

使用说明小心避免不良对比。Firefox 的占位符似乎默认降低了不透明度，因此需要在opacity: 1在这里使用。
请注意，如果占位符文本不合适，它将被切断-调整输入元素的大小em并使用最小字体的大小来测试它们。别忘了翻译：有些语言需要为同一个词提供更多的空间。
) V, b7 x0 ]# \  O0 K% c支持 HTMLplaceholder但不支持 CSS 浏览器(如 Opera）还应进行测试。
- G! g+ Y; X. ^  I* r( P) A, K对某些浏览器input类型 ( email,search)使用额外的默认 CSS 。这些可能会以意想不到的方式影响渲染。使用属性 -webkit-appearance并-moz-appearance更改它。例子：[code]    [type="search"]              -moz-appearance:    textfield;        -webkit-appearance: textfield;        appearance: textfield;   code]