CSS ::placeholder 选择器

CSS ::placeholder 可以选择一个表单元素的占位文本,它允许开发者和设计师自定义占位文本的样式。

在使用了 ::placeholder 伪元素的选择器中,仅有小一部分 CSS 属性可以使用,这个集合可以参考 ::first-line 伪元素。


实例

更改输入字段的占位符文本的颜色:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ::-webkit-input-placeholder { /* Edge */
  6. color: red;
  7. }
  8. :-ms-input-placeholder { /* Internet Explorer */
  9. color: red;
  10. }
  11. ::placeholder {
  12. color: red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <p>请使用 ::placeholder 选择器来改变占位文本的颜色:</p>
  18. <input type="text" name="fname" placeholder="First name">
  19. </body>
  20. </html>

定义和用法

::placeholder 选择器用于选取带有占位符文本的表单元素,并让您设置占位符文本的样式。

占位符文本使用 placeholder 属性设置,这个属性规定描述输入字段期望值的提示文本。

提示:在大多数浏览器中,占位符文本的默认颜色为浅灰色。


浏览器支持

表格中的数字注明了完全支持该选择器的首个浏览器版本。

后面跟 -webkit-、-moz- 或 -ms- 的数字指示使用前缀的首个版本。

选择器
::placeholder57.04.0 -webkit-12.0 -webkit-10.0 -ms-51.04.0 -moz-10.15.0 -webkit-44.015.0 -webkit-

CSS 语法

  1. ::placeholder {
  2. css declarations;
  3. }

分类导航