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

在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 */  
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如有链接无法下载、失效或广告,请联系站长处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 如果你也有好模型或者教程,可以到审核区发布,分享有金币奖励和额外收入!
6. 本站提供的模型、教程、施工图等等其他资源,都不包含技术服务 请大家谅解!
7. 如遇到加密压缩包,默认解压密码为yiweibang.com如遇到无法解压的请联系管理员!

易微帮 » 为HTML5 Placeholder占位文字添加CSS样式

提供最优质的资源集合

立即查看 了解详情