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

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

但是以下CSS对占位符的值没有任何作用：

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

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

Value仍然是grey而不是red 。

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

履行

有三种不同的实现：伪元素，伪类和什么都没有。

WebKit，Blink（Safari，谷歌 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 选择器。

关于最佳实施的讨论仍在继续。请注意，伪元素就像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!">

使用说明

小心避免不良对比。 Firefox 的占位符似乎默认为不透明度降低，因此需要使用opacity: 1 。
请注意，如果占位符文本不适合，它就会被截断 - 在em输入元素的大小，并使用最小的字体大小设置进行测试。不要忘记翻译：某些语言需要更多空间来使用相同的单词。
应该测试支持placeholder但不支持 CSS 的浏览器（如 Opera）的浏览器。
某些浏览器对某些input类型（ email ， search ）使用其他默认 CSS。这些可能会以意想不到的方式影响渲染。使用属性 -webkit-appearance和-moz-appearance来更改它。例：

[type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* 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占位符的样式。

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

您可能还想要样式 textareas：

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

协慌网