E::placeholder

语法：

E::placeholder { sRules }

说明：

设置对象文字占位符的样式。
  • ::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
  • 当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
  • 需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder
  • Firefox支持该伪元素使用text-overflow属性来处理溢出问题。

  • ::placeholder的使用示例:

    <input type="text" placeholder="占位符" /> input::-webkit-input-placeholder { color: #999; } input:-ms-input-placeholder { // IE10+ color: #999; } input:-moz-placeholder { // Firefox4-18 color: #999; } input::-moz-placeholder { // Firefox19+ color: #999; }

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-9 12-16 -ms- 2-3.6 4-56 -webkit- 3.1-4 9-12.1 3.2-4.1 2.1-4.4.4 -webkit- 7-10 -webkit- 10-12.1 61 56 10-11 -ms- 11.4 -webkit- 4-5 -webkit- 1.2 -webkit- 7.12
10-11 -ms- 4-18 -moz- #1 57+ 5-10 -webkit- 15-43 -webkit- 4.2-10.2 -webkit- 37 -webkit-
19-50 -moz- 10.1+ 44+ 10.3+
51+
  1. ::-moz-placeholder 伪元素在Firefox 19+替代了之前的 :-moz-placeholder 伪类

示例：