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

李鸿文

Chrome 支持元素上的占位符属性input[type=text](其他人也可能支持)。
9 Y& F7 e1 g. w5 q% ^9 F但是以下 CSS 对占位符的值没有影响：
- h) e4 _/ X4 l4 f

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

但Value仍将保留grey而不是red。
有没有办法改变占位符文本的颜色？
* d- {: k7 L+ D4 l$ L) Y/ N                                                               
& c' V+ x# U; e# F1 d1 n    解决方案:                                                               
                                                                有伪元素、伪类和空三种不同的实现。
4 `3 R0 ?" z! r) l4 H9 E! T' eWebKit、Blink（Safari、Google Chrome、Opera 15 ）和 Microsoft Edge 正在使用伪元素：::-webkit-input-placeholder. [参考]
Mozilla Firefox4-18使用伪类：-moz-placeholder（一个冒号)。
# N4 U- U6 k/ R2 S8 d+ Y, y7 mMozilla Firefox 正在使用假元素： ：-moz-placeholder，但是旧的选择器将工作一段时间。[参考]
4 C: P  D' n2 |$ `8 a0 Z* V1 GInternet Explorer 10 和 11 使用伪:-ms-input-placeholder. [参考]
2017年 4月：大多数现代浏览器都支持简单的伪元素：placeholder [参考]Internet Explorer 9 和更低版本根本不支持placeholder属性，而Opera 12 和较低版本不支持任何用于占位符的 CSS 选择器。
关于最佳实现的讨论仍在继续。请注意，伪元素就像Shadow DOM真实元素padding上input背景色和伪元素不会相同。
CSS 选择器用户代理需要忽略带有未知选择器的规则。请参考选择器级别 3:
一组包含无效选择器的选择器无效。
因此，我们需要为每个浏览器制定单独的规则。否则，整个组将被所有浏览器忽略。
2 u7 h( g/ |6 P

::-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;}
" s2 b# J4 k( o* w7 b7 |1 f7 o7 d8 K

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