使用CSS更改HTML5输入的占位符颜色
发布于2021-01-31 17:04 阅读(1282) 评论(0) 点赞(10) 收藏(1)
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月：大多数现代浏览器都支持简单的伪元素
::placeholder[ Ref ]
Internet Explorer 9和更低版本完全不支持该placeholder属性，而Opera 12和更低版本则不支持占位符的任何CSS选择器。
关于最佳实现的讨论仍在进行中。请注意，伪元素的行为类似于Shadow DOM中的真实元素。一个padding上input不会得到相同的背景颜色与伪元素。
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支持
placeholder但不具有CSS支持的浏览器（例如Opera）也应进行测试。 - 某些浏览器对某些
input类型（email，search）使用其他默认CSS 。这些可能会以意想不到的方式影响渲染。使用属性-webkit-appearance并-moz-appearance进行更改。例：
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/111/0acee4302f05f537155f/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力