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

Z时代
2024-01-10
分类：问答

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

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

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value仍将保留grey而不是red。

回答：

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

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月：

Internet Explorer 9和更低版本完全不支持该placeholder属性，而Opera12和更低版本则不支持占位符的任何CSS选择器。

关于最佳实现的讨论仍在进行中。请注意，伪元素在ShadowDOM中的作用类似于真实元素。一个padding上input不会得到相同的背景颜色与伪元素。

回答：

用户代理必须忽略具有未知选择器的规则。

包含无效选择器的一组选择器无效。

因此，我们需要为每个浏览器使用单独的规则。否则，整个组将被所有浏览器忽略。

::-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支持placeholder但不具有CSS支持的浏览器（例如Opera）也应进行测试。

有些浏览器使用一些额外的默认CSS input类型（email，search）。这些可能会以意想不到的方式影响渲染。使用属性 -webkit-appearance并-moz-appearance进行更改。例：
```
[type="search"] {
    -moz-appearance:    textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
}
```