如何修改输入框placeholder文字颜色?
在网上看到说可以使用占位符属性来修改placeholder文字颜色,可是照着做并没有效果,代码如下。
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}
<input type="text" placeholder="Value">
color: red !important;
}
<input type="text" placeholder="Value">
后来又去查了一些相关资料,终于找到解决办法,就是使用伪元素或伪类。
- 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
IE9及更低版本根本不支持该placeholder属性,而Opera 12及更低版本不支持占位符的任何CSS选择器。
请注意,伪元素在Shadow DOM中的作用与真实元素一样。一个paddingon 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!">
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!">
使用说明
- 小心避免不好的对比。火狐的占位符似乎是一个减少不透明度,所以需要在opacity: 1这里使用。
- 如果占位符文本不合适,请将占位符文本剪切掉,调整输入元素的大小,使用em最小的字体大小设置对其进行测试。不要忘记翻译:有些语言需要更多的空间,同一个字。
- HTML支持浏览器,placeholder但没有CSS支持(如Opera)也应该被测试。
- 一些浏览器对某些input类型(email,search)使用额外的默认CSS 。这些可能会以意想不到的方式影响渲染。使用属性
-webkit-appearance
并-moz-appearance
改变它。例:
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}