在大多数浏览器中, 占位符(在输入标签中)为灰色, 以更改此占位符的颜色(非标准)::占位符可以使用选择器, 通过它们在该特定选择器中实现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 >输出如下：
