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

李鸿文

Chrome 支持元素上的占位符属性input[type=text](其他人也可能支持)。
但是以下 CSS 对占位符的值没有影响：
1 V6 ^5 S" |: a$ E3 N( s

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

但Value仍将保留grey而不是red。
有没有办法改变占位符文本的颜色？
$ s0 \) u( K' b                                                               
    解决方案:                                                               
6 c, W3 r+ N5 o4 E( n- d: I; V                                                                有伪元素、伪类和空三种不同的实现。
WebKit、Blink（Safari、Google Chrome、Opera 15 ）和 Microsoft Edge 正在使用伪元素：::-webkit-input-placeholder. [参考]
Mozilla Firefox4-18使用伪类：-moz-placeholder（一个冒号)。
+ q1 M/ z# H) ]& YMozilla Firefox 正在使用假元素： ：-moz-placeholder，但是旧的选择器将工作一段时间。[参考]
Internet Explorer 10 和 11 使用伪:-ms-input-placeholder. [参考]
: [6 ^: x" s: N2017年 4月：大多数现代浏览器都支持简单的伪元素：placeholder [参考]Internet Explorer 9 和更低版本根本不支持placeholder属性，而Opera 12 和较低版本不支持任何用于占位符的 CSS 选择器。
关于最佳实现的讨论仍在继续。请注意，伪元素就像Shadow DOM真实元素padding上input背景色和伪元素不会相同。
: J3 L9 M* @; I" qCSS 选择器用户代理需要忽略带有未知选择器的规则。请参考选择器级别 3:
, ~1 G# r/ x! I1 _- J一组包含无效选择器的选择器无效。
# m$ X4 Q$ \2 m8 @- m7 _因此，我们需要为每个浏览器制定单独的规则。否则，整个组将被所有浏览器忽略。

::-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;}
  u* _. l' K6 M1 m) ?. n$ I  X3 P, Y% L/ r+ |

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