为HTML5 placeholder占位文字添加css样式
2017-07-03 本文已影响0人
一个小小程序猿
placerholder属性是HTML5中的新属性。
定义和用法:
placeholder属性提供可描述输入字段预期值的提示信息。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
语法:
<input placeholder="text ">
属性值:
text规定用于验证输入字段的模式。
简单说,就是提示用户输入什么类型的信息。
注释:
placeholder属性适应于以下的<input >类型:text ,search,url,telephone,email以及password。

我们可以通过css控制placeholder文字的样式。
以下为各个浏览器厂商为其提供的伪类控制属性:

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

主要代码:
