在大多数浏览器中, 占位符(在输入标签中)为灰色, 以更改此占位符的颜色(非标准)::占位符可以使用选择器, 通过它们在该特定选择器中实现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输入的占位符颜色】输出如下:
文章图片
推荐阅读
- PHP Ds Queue clear()函数用法介绍
- 算法设计(如何实现不带算术运算符的减法1)
- AngularJS 事件介绍和用法详细介绍
- PHP Ds Deque apply()函数用法介绍
- 如何使用JavaScript切换布尔值()
- 使用Java中的正则表达式获取字符串中每个单词的首字母
- 算法(一个检查字符串是否相互旋转的程序)
- 如何使用Python和其他语言为变量赋值
- JavaScript 严格模式解析和使用示例