这篇文章我们来看看什么是input输入框背景文字提示效果，如下图所示：
这种效果现在网上非常的普遍流行，但大部分是使用javascript实现的。但html5给我们提供了新的纯html的实现方式，不需要任何的javascript，只需要在你的input文本框的标记上添加html5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。
语法基本是这个样子：<input placeholder=”提示信息...”>
html代码<form>
<input type="text" placeholder="你的姓名..." name="lname">
<input type="password" placeholder="你的密码..." name="pass">
<input type="submit" value="提交">
</form>用css美化placeholder提示信息的样式css3里有相应的通用的对placeholder提示信息美化的方法。你可以设置提示信息文字的颜色，透明度，背景色等。
为了最大化的兼容所有浏览器，给css里的placeholder属性添加浏览器引擎前缀还是有必要的。
- 谷歌浏览器(webkit): ::-webkit-input-placeholder pseudo-element;
- ie10: :-ms-input-placeholder pseudo-class;
- 火狐浏览器(gecko18-): :-moz-placeholder pseudo-class;
- 火狐浏览器(gecko19+): ::-moz-placeholder pseudo-element;
- opera(presto): 无。
/* webkit browsers */
::-webkit-input-placeholder {
color: #777;
}
/* mozilla firefox 4 to 18 */
:-moz-placeholder {
color: #777;
opacity: 1;
}
/* mozilla firefox 19+ */
::-moz-placeholder {
color: #777;
opacity: 1;
}
/* internet explorer 10+ */
:-ms-input-placeholder {
color: #777;
}对placeholder的浏览器支持情况各种浏览器对html5/css3里出现的新特征、新属性的支持是逐步提高的，最终所有的浏览器都会完全支持html5/css3，这是毫无疑问的。目前，对html5的placeholder属性支持的浏览器有谷歌浏览器、火狐浏览器、safari、opera，还有ie10+。