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

在大多数浏览器中, 占位符(在输入标签中)为灰色, 以更改此占位符的颜色(非标准)::占位符可以使用选择器, 通过它们在该特定选择器中实现color属性。
该选择器可以将浏览器更改为浏览器, 例如
对于Chrome, Mozilla和Opera浏览器, 选择器可以实现为

::placeholder

对于Internet Explorer, 选择器可以是

:-ms-input-placeholder

对于Internet Edge, 它可以是

::-ms-input-placeholder

例子：
HTML代码1
:
该代码显示了在不同浏览器中使用占位符选择器

< !DOCTYPE html> < html > < head > < title > Change Placeholder Color< / title > < / head > < style > ::placeholder { /* Firefox, Chrome, Opera */ color: blue; }:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; }::-ms-input-placeholder { /* Microsoft Edge */ color: orange; } < / style > < body > < p > Change Placeholder Color< / p > < input type = "text" placeholder = "Enter your Text" > < / body > < / html >

输出如下：
在谷歌浏览器中

文章图片
在Internet Edge中

文章图片
在Internet Explorer中

文章图片
HTML代码2
:
此代码在输入标签的email属性中实现占位符选择器。占位符选择器可以应用于输入标签的任何属性(文本, 电话, 密码等), 以突出显示任何不同属性中的颜色变化。

< !DOCTYPE html> < html > < head > < title > Change Placeholder Color< / title > < / head > < style > input[type="email"]::placeholder { /* Firefox, Chrome, Opera */ color: blue; }input[type="email"]:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; }input[type="email"]::-ms-input-placeholder { /* Microsoft Edge */ color: orange; } < / style > < body > < p > Change Placeholder Color< / p > < input type = "email" placeholder = "Enter your Email" > < / body > < / html >

【使用CSS更改HTML5输入的占位符颜色】输出如下：