主页 > 教程合集 > Html/css >

HTML5中用Placeholder实现input背景文字提示效果

时间:2018-10-07 阅读:0

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

HTML5中用Placeholder实现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属性添加浏览器引擎前缀还是有必要的。

HTML5中用Placeholder实现input背景文字提示效果

- 谷歌浏览器(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+。

如果这篇博文对你有帮助,希望您可以打赏给博主余斗,以支持余斗继续坚持下去!

余斗个人博客打赏二维码

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2018-10-07最后更新,转载注明出处。

相关推荐

下一篇:没有了
返回顶部