这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

::placeholder {
  color: red;
  font-size: 1.5em;
}

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

语法

::placeholder

 

示例

HTML

<input placeholder="Type something here!">

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

输出

 

标准

规范 状态 说明
CSS Pseudo-Elements Level 4
::placeholder
Working Draft Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

功能 Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
基本支持 57 51.0 (51.0)[1] 未实现 未实现 44 10.1
前缀支持 Supported Supported Supported 10 -ms- Supported 5 -webkit-
功能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 57 57 52.0 (52.0) 未实现   10.3
前缀支持 Supported Supported Supported 10 -ms- Supported 5 -webkit-

[1] 在Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) 以及更低的版本中,请使用 ::-moz-placeholder

相似阅读

文档标签和贡献者

此页面的贡献者: maoyumaoxun, nDos, Colin.Go, LiuYuan
最后编辑者: maoyumaoxun,