html5背景文字,HTML5 Placeholder实现input背景文字提示效果

这篇文章我们来看看什么是input输入框背景文字提示效果，如下图所示：

这种效果现在网上非常的普遍流行，但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式，不需要任何的JavaScript，只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。

语法基本是这个样子：

HTML代码

用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 {