使用 CSS 更改 HTML 输入的占位符颜色

Question

Chrome v4 支持 input[type=text] 元素上的占位符属性（其他可能也这样做）。

但是，以下 CSS 不会对占位符的值执行任何操作：

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

值仍将保留grey，而不是red。

有办法改变占位符文本的颜色吗？

Answer 1

/* 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 placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

这将为所有input和textarea占位符设置样式。

重要说明：不要对这些规则进行分组。相反，为每个选择器制定单独的规则（组中一个无效的选择器会使整个组无效）。

Answer 2

实施

共有三种不同的实现：伪元素、伪类和无。

• 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 选择器。

关于最佳实施方案的讨论仍在继续。请注意，伪元素的行为就像阴影中的真实元素一样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!">