<p>Chrome v4 支持 <code>input[type=text]</code> 元素上的占位符属性（其他可能也这样做）。</p>
<p>但是，以下 CSS 不会对占位符的值执行任何操作：</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}</pre>
<pre class="brush:html;toolbar:false;"><input type="text" placeholder="Value"></pre>
<p><br /></p>
<p><code>值</code>仍将保留<code>grey</code>，而不是<code>red</code>。</p>
<p><strong>有办法改变占位符文本的颜色吗？</strong></p>
2
1017
收藏
/* do not group these rules */ *::-webkit-input-placeholder { color: red; } *:-moz-placeholder { /* FF 4-18 */ color: red; opacity: 1; } *::-moz-placeholder { /* FF 19+ */ color: red; opacity: 1; } *:-ms-input-placeholder { /* IE 10+ */ color: red; } *::-ms-input-placeholder { /* Microsoft Edge */ color: red; } *::placeholder { /* modern browser */ color: red; }这将为所有
input和textarea占位符设置样式。重要说明：不要对这些规则进行分组。相反，为每个选择器制定单独的规则（组中一个无效的选择器会使整个组无效）。
实施
共有三种不同的实现：伪元素、伪类和无。
::-webkit-input-placeholder。 [参考]:-moz-placeholder（一个冒号）。 [参考]::-moz-placeholder，但旧的选择器仍将工作一段时间。 [参考]:-ms-input-placeholder。 [参考]::placeholder[Ref]Internet Explorer 9 及更低版本根本不支持
placeholder属性，而 Opera 12 及更低版本不支持任何占位符的 CSS 选择器。关于最佳实施方案的讨论仍在继续。请注意，伪元素的行为就像阴影中的真实元素一样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; }