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

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

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

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

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

但仍会保留而不是.Valuegreyred

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

分割线

网友回答：

/* 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>

这将设置所有和占位符的样式。inputtextarea

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

分割线

网友回答：

实现

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

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 年 <> 月：大多数现代浏览器都支持简单的伪元素 ：:p laceholder ^[Ref]

Internet Explorer 9 及更低版本根本不支持该属性，而 Opera 12 及更低版本不支持占位符的任何 CSS 选择器。placeholder

关于最佳实现的讨论仍在继续。请注意，伪元素的行为类似于 Shadow DOM 中的真实元素。A 不会获得与伪元素相同的背景颜色。paddinginput

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但没有CSS支持的浏览器（如Opera）也应该进行测试。placeholder
占位符不能替代标签，因此请确保您也有标签
某些浏览器对某些类型（、）使用其他默认 CSS。这些可能会以意想不到的方式影响渲染。使用属性并进行更改。例：inputemailsearch-webkit-appearance-moz-appearance

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

分割线

网友回答：

您可能还希望设置文本区域的样式：

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

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

<textarea rows="4" cols="50" placeholder="Stack Snippets are nice!">
</textarea>

模板简介：该模板名称为【使用 CSS 更改 HTML5 输入的占位符颜色】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。