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

  • 时间:2018-10-09 09:12 编辑: 来源: 阅读:741
  • 扫一扫,手机访问
摘要:什么是input输入框背景文字提示效果,如下图所示:这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范

什么是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+。


  • 全部评论(0)
最新发布的资讯信息
【源码学院|PHP技术】PHP随机自动跳转代码(2019-05-21 09:35)
【建站教程|故障问题】Bootstrap在移动端响应式不起作用的解决方法(2019-05-13 09:19)
【CMS学院|DEDECMS】织梦dedecms使用Mysql8.0无法登录后台的解决办法(2019-05-06 09:33)
【CMS学院|DEDECMS】织梦单独调用栏目页友情链接每个栏目调用不同友情链接(2019-05-06 09:31)
【建站教程|建站技巧】微信小程序怎么制作?小程序的特点是什么?(2019-04-23 09:33)
【CMS学院|DEDECMS】织梦后台Call to undefined function make_hash()解决方法(2019-04-22 08:51)
【CMS学院|DEDECMS】织梦会员中心个人空间文档有数据分页条数为0的解决方法(2019-04-22 08:47)
【酷文分享|】SEO优化根本目的及有效的优化技巧(2019-04-19 08:31)
【CMS学院|DEDECMS】织梦一键清空所有数据并让所有id从1开始的操作方法(2019-04-17 09:04)
【建站教程|建站技巧】名被劫持之后有什么后果?有什么好的方法解决?(2019-04-16 09:27)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明
CopyRight 2004-2017 淘源码网 | 苏ICP备12026353号-3