CSS ::placeholder 选择器
CSS ::placeholder
可以选择一个表单元素的占位文本,它允许开发者和设计师自定义占位文本的样式。
在使用了 ::placeholder
伪元素的选择器中,仅有小一部分 CSS 属性可以使用,这个集合可以参考 ::first-line 伪元素。
实例
更改输入字段的占位符文本的颜色:
<!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>
定义和用法
::placeholder
选择器用于选取带有占位符文本的表单元素,并让您设置占位符文本的样式。
占位符文本使用 placeholder
属性设置,这个属性规定描述输入字段期望值的提示文本。
提示:在大多数浏览器中,占位符文本的默认颜色为浅灰色。
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
后面跟 -webkit-、-moz- 或 -ms- 的数字指示使用前缀的首个版本。
选择器 | |||||
---|---|---|---|---|---|
::placeholder | 57.04.0 -webkit- | 12.0 -webkit-10.0 -ms- | 51.04.0 -moz- | 10.15.0 -webkit- | 44.015.0 -webkit- |
CSS 语法
::placeholder {
css declarations;
}