HTML5 Placeholder实现input背景文字提示效果
2015-05-12 12:41
567 查看
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示:
![](http://www.html5tricks.com/wp-content/uploads/2014/06/placeholder.jpg)
这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的
语法基本是这个样子:
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): 无。
各种浏览器对HTML5/CSS3里出现的新特征、新属性的支持是逐步提高的,最终所有的浏览器都会完全支持HTML5/CSS3,这是毫无疑问的。目前,对HTML5的placeholder属性支持的浏览器有谷歌浏览器、火狐浏览器、Safari、Opera,还有IE10+。
![](http://www.html5tricks.com/wp-content/uploads/2014/06/placeholder.jpg)
这种效果现在网上非常的普遍流行,但大部分是使用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+。
相关文章推荐
- HTML5 Placeholder实现input背景文字提示效果
- HTML5中input背景提示文字(placeholder)的CSS美化
- HTML5 placeholder美化input背景提示文字
- HTML5中input背景提示文字(placeholder)的CSS美化
- HTML5 placeholder美化input背景提示文字
- HTML5中input背景提示文字(placeholder)的CSS美化
- HTML5----CSS输入框背景,颜色,内容提示效果-placeholder属性
- placeholder 效果的实现,input提示字,获取焦点时消失
- 基于JS实现html中placeholder属性提示文字效果示例
- input 标签实现输入框带提示文字效果(两种方法)
- HTML5在input背景提示文本(placeholder)的CSS美化
- 自定义ImageSpan实现简单的文字图片背景效果
- jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
- 在html5中实现input下拉提示
- input提示文字;placeholder字体修改
- jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
- 实现输入框提示文字效果
- JS实现背景透明度可变,文字不透明的效果
- JavaScript实现的文本框placeholder提示文字功能示例
- jQuery实现input文本框内灰色提示文本效果 和 input标签获取焦点是文本框内提示信息清空