Chrome支持input[type=text]元素上的占位符属性（其他元素可能也支持）
但以下CSS对占位符的值没有任何影响：
输入[占位符]，*[占位符]{
颜色：红色！重要；
}<；输入type=“text”placeholder=“Value”>但是值仍将保持灰色，而不是红色
有没有办法更改占位符文本的颜色？
实施
有三种不同的实现：伪元素、伪类和nothing
- WebKit、Blink（Safari、Google Chrome、Opera 15+）和Microsoft Edge正在使用一个伪元素：
：-WebKit输入占位符[Ref] - Mozilla Firefox 4到18正在使用一个伪类：
：-moz占位符（onecolon）[Ref] - Mozilla Firefox 19+正在使用一个伪元素：
：-moz占位符，但旧的选择器仍将工作一段时间[Ref] - Internet Explorer 10和11正在使用伪类：
：-ms输入占位符[Ref] - 2017年4月：大多数现代浏览器支持简单的伪元素
：：占位符
Internet Explorer 9和更低版本根本不支持占位符属性，而Opera 12和更低版本不支持占位符的任何CSS选择器
关于最佳实施方案的讨论仍在继续。请注意，伪元素的行为类似于影子DOM中的真实元素。输入上的填充将不会获得与伪元素相同的背景色
CSS选择器
要求用户代理忽略具有未知选择器的规则。参见选择器级别3：
包含无效选择器的选择器组无效
因此，我们需要为每个浏览器制定单独的规则。否则，所有浏览器都会忽略整个组。
：：-webkit输入占位符{/*webkit，闪烁，边缘*/
颜色：#909；
}
：-moz占位符{/*Mozilla Firefox 4到18*/
颜色：#909；
不透明度：1；
}
：-moz占位符{/*Mozilla Firefox 19+*/
颜色：#909；
不透明度：1；
}
：-ms输入占位符{/*Internet Explorer 10-11*/
颜色：#909；
}
：-ms输入占位符{/*Microsoft Edge*/
颜色：#909；
}
：：占位符{/*大多数现代浏览器现在都支持此功能*/
颜色：#909；
}<；input placeholder=“堆栈代码段很棒！”>使用说明
- 小心避免不好的对比。Firefox的占位符显示为默认值，不透明度降低，因此需要在此处使用
opacity:1 - 请注意，如果占位符文本不适合，则将其截断–在
em中调整输入元素的大小，并使用最大最小字体大小设置对其进行测试。别忘了翻译：有些语言需要更多的空间来容纳同一个单词 - 对HTML支持
占位符但不支持CSS的浏览器（如Opera）也应该进行测试 - 一些浏览器对某些
输入类型（电子邮件，搜索）使用额外的默认CSS。这些可能会以意外的方式影响渲染。使用属性-webkit外观和-moz外观更改该属性。例如：
[type=“search”]{
-moz外观：textfield；
-webkit外观：textfield；
外观：textfield；
}