Chrome 支持元素上的占位符属性input[type=text]（其他人可能也支持）。
但是以下 CSS 对占位符的值没有任何影响：
input[placeholder],
[placeholder],
*[placeholder] {
color: red !important;
}
<input type="text" placeholder="Value" />
但Value仍将保留grey而不是red。
有没有办法改变占位符文本的颜色？
解决方法
存在三种不同的实现：伪元素、伪类和空。
- 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[参考]
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;
}
