使用CSS更改HTML5输入的占位符颜色
Chrome支持input[type=text]元素的占位符属性（其他人可能也会这样做）。
但是下面的CSS对占位符的值没有任何作用：
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}<input type="text" placeholder="Value">履行
有三种不同的实现：伪元素，伪类，并且什么都不是。
::-webkit-input-placeholder 。 [参考文献] :-moz-placeholder （一个冒号）。 [参考文献] ::-moz-placeholder ，但旧选择器仍然可以工作一段时间。 [参考文献] :-ms-input-placeholder 。 [参考文献] ::placeholder [Ref] Internet Explorer 9及更低版本根本不支持placeholder属性，而Opera 12及更低版本不支持用于占位符的任何CSS选择器。
有关最佳实施的讨论仍在继续。 请注意，伪元素在Shadow DOM中的作用与真实元素相同。 input上的padding将不会获得与伪元素相同的背景颜色。
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!">
/* do not group these rules */
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}<input placeholder='hello'/> <br />
<textarea placeholder='hello'></textarea>您可能还想要设计textareas：
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}