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

  • 时间:2018-10-09 09:12 编辑: 来源: 阅读:675
  • 扫一扫,手机访问
摘要:什么是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)
最新发布的资讯信息
【源码学院|服务器】隐藏浏览器header 中的X-Powered-By: PHP信息(2019-02-22 09:15)
【CMS学院|DEDECMS】织梦dedecms发布文章提示标题不能为空的解决办法(2019-02-21 09:04)
【CMS学院|WORDPRESS】阿里云提示WordPress“/wp-includes/http.php输入IP验证不当”的解决办法(2019-02-21 09:01)
【CMS学院|WORDPRESS】如何移除wordpress登录时的错误震动效果(2019-02-21 08:41)
【建站教程|建站技巧】手机端(移动端)自适应样式 @media 的使用(2019-01-23 08:56)
【源码学院|服务器】nginx加载伪静态文件.htaccess的办法(2019-01-23 08:53)
【CMS学院|WORDPRESS】WordPress升级时提示”另一更新正在进行”的解决办法(2019-01-22 09:31)
【源码学院|PHP技术】PHP实时回显 实时输出结果的方法 实时反馈结果到浏览器(2019-01-20 08:45)
【源码学院|PHP技术】PHP转换UNIX时间戳 UTC时间(TZ格式) 标准时间的方法 UNIX UTC GMT时间、本地时间互转(2019-01-20 08:43)
【CMS学院|PHPCMS】PHPCMS V9搜索结果按发布时间或ID排序的方法(2019-01-16 09:37)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明
CopyRight 2004-2017 淘源码网 | 苏ICP备12026353号-3