PROSAGA码农传奇-html/HTML5-使用CSS更改HTML5输入的占位符颜色

有三种不同的实现：伪元素，伪类，什么也没有。

WebKit，Blink（Safari，Google Chrome，Opera 15+）和Microsoft Edge使用伪元素：::-webkit-input-placeholder。[ 参考 ]
Mozilla Firefox的4至18是使用伪类：:-moz-placeholder（一个冒号）。[ 参考 ]
Mozilla Firefox 19+使用的是伪元素：::-moz-placeholder，但是旧的选择器仍然可以使用一段时间。[ 参考 ]
Internet Explorer 10和11使用伪类：:-ms-input-placeholder。[ 参考 ]
2017年4月：大多数现代浏览器都支持简单的伪元素::placeholder [ Ref ]
Internet Explorer 9和更低版本完全不支持该placeholder属性，而Opera 12和更低版本则不支持占位符的任何CSS选择器。

关于最佳实现的讨论仍在进行中。请注意，伪元素的行为类似于Shadow DOM中的真实元素。一个padding上input不会得到相同的背景颜色与伪元素。

CSS选择器
用户代理必须忽略具有未知选择器的规则。参见选择器级别3：

包含无效选择器的一组选择器无效。

因此，我们需要为每个浏览器使用单独的规则。否则，整个组将被所有浏览器忽略。
```
::-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;
}
<input placeholder="Stack Snippets are awesome!">
```

使用说明
小心避免对比度差。Firefox的占位符似乎是默认的，具有降低的不透明度，因此需要在opacity: 1此处使用。
请注意，如果占位符文本不合适，则会将其截断-调整输入元素的大小，em并使用较大的最小字体设置对其进行测试。不要忘记翻译：某些语言需要为同一个单词留出更多空间。
具有HTML支持placeholder但不具有CSS支持的浏览器（例如Opera）也应进行测试。
某些浏览器对某些input类型（email，search）使用其他默认CSS 。这些可能会以意想不到的方式影响渲染。使用属性 -webkit-appearance并-moz-appearance进行更改。例：
```
	[type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
```