为HTML5 Placeholder占位文字添加CSS样式

2017-11-13 13:30| 发布者: 蚂蚁大喇叭| 查看: 2412| 评论: 6

摘要: 在HTML5中新增了许多新特性,其中placeholder就是其中之一。placeholder属性规定可描述输入字段预期值的简短的提示信息。该提示会在用户输入值之前显示在输入字段中。
本站源码等资源来源于社区网友上传、网络等。仅供学习交流和研究使用,请勿商用。如有侵犯您的版权,请联系我们,本站将立即删除,联系QQ:791577401。

在HTML5中新增了许多新特性,其中placeholder就是其中之一。placeholder属性规定可描述输入字段预期值的简短的提示信息。该提示会在用户输入值之前显示在输入字段中。



placeholder属性适用于下面的表单input类型:text、search、url、tel、email 和 password。IE10、Firefox、Opera、Chrome 和 Safari 支持 placeholder 属性。在支持placeholder属性的浏览器中,placeholder默认显示为灰色。例如下面的示例:

默认的placeholder示例:

我们可以通过CSS来控制placeholder占位文字的样式。各个浏览器厂商都为placeholder属性提供了各自版本的伪类控制属性:

::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-moz-placeholder{}                  /* Firefox版本4-18 */
:-ms-input-placeholder{}           /* IE浏览器 */

通过这些伪类,我们就可以修改placeholder占位文字的样式。

修改后的placeholder示例:

生成上面的placeholder占位文字样式的CSS代码如下:

input[type="email"]::-webkit-input-placeholder {color:#FFF; background:blue;}
input[type="email"]::-moz-placeholder {color:#FFF; background:blue;} /* firefox 19+ */
input[type="email"]:-moz-placeholder {color:#FFF; background:blue;}
input[type="email"]:-ms-input-placeholder {color:#FFF; background:blue;} /* ie */

input[type="text"]::-webkit-input-placeholder {color:green; }
input[type="text"]::-moz-placeholder {color:green;} /* firefox 19+ */
input[type="text"]:-moz-placeholder {color:green;}
input[type="text"]:-ms-input-placeholder {color:green;} /* ie */  

扫描关注蚂蚁HTML5社区官方微信

无语

惊吓

期待

很赞

差劲

相关阅读

发表评论

最新评论

引用 asd838183132 2018-3-10 08:44
天啦鲁,我的蚂蚁币不够啊谢谢分享,谢谢分享。。。。。。。
引用 asd838183132 2018-3-10 08:44
天啦鲁,我的蚂蚁币不够啊谢谢分享,谢谢分享。。。。。。。
引用 chichi1314 2018-3-2 04:59
666666666666
引用 zhousongyu 2018-1-19 22:07
66666666666666666666666666
引用 dallq1 2017-11-28 10:16
666666666
引用 wiky 2017-11-15 10:25
6666666666666

查看全部评论(6)

热门教程

【教程下载】HTML5移动应用开发入门经典
【教程下载】HTML5移动应用开发入门经典
【HTML5开发教程下载】HTML5移动应用开发入门经典,总共24章,每章一个小时学习时间,
【教程下载】HTML5与CSS3权威指南
【教程下载】HTML5与CSS3权威指南
《HTML 5与CSS 3权威指南》内容系统而全面,详尽地讲解了html 5和css 3的所有新功能和
【教程下载】HTML5游戏开发(全)
【教程下载】HTML5游戏开发(全)
【HTML5游戏开发(全)】本书分为9章。 学习如何绘制游戏对象、绘制动画、加入音频等
关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 蚂蚁开源 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|Zzfriend

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

返回顶部