如何修改输入框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;
}
