placeholder 是HTML5中的新属性，适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。


设置对象文字占位符的样式。

::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。


当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。


需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder

Firefox支持该伪元素使用text-overflow属性来处理溢出问题。


::placeholder的使用示例:

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



兼容性问题：


示例：

HTML代码：

<inputtype="text"id="userName"placeholder="请输入用户名">


CSS代码：

#userName::-webkit-input-placeholder{color:red;}#userName:-moz-placeholder{//Firefox4-18color:red;}#userName::-moz-placeholder{//Firefox19+color:red;}#userName:-ms-input-placeholder{//IE10+color:red;}


效果：