CSS ::placeholder 选择器 详解
css3基础 2023-07-22 16:51:02小码哥的IT人生shichen
CSS ::placeholder 选择器
实例
更改输入字段的占位符文本的颜色：
::-webkit-input-placeholder { /* Edge */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
::placeholder {
color: red;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
::-webkit-input-placeholder { /* Edge */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer */
color: red;
}
::placeholder {
color: red;
}
</style>
</head>
<body>
<p>请使用 ::placeholder 选择器来改变占位文本的颜色：</p>
<input type="text" name="fname" placeholder="First name">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
::placeholder 选择器用于选取带有占位符文本的表单元素，并让您设置占位符文本的样式。
占位符文本使用 placeholder 属性设置，这个属性规定描述输入字段期望值的提示文本。
提示：在大多数浏览器中，占位符文本的默认颜色为浅灰色。
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
后面跟 -webkit-、-moz- 或 -ms- 的数字指示使用前缀的首个版本。
| 选择器 | |||||
|---|---|---|---|---|---|
| ::placeholder | 57.0 4.0 -webkit- |
12.0 -webkit- 10.0 -ms- |
51.0 4.0 -moz- |
10.1 5.0 -webkit- |
44.0 15.0 -webkit- |
CSS 语法
::placeholder {
css declarations;
}