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

Posted 蚂蚁开源社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为HTML5 Placeholder占位文字添加CSS样式相关的知识,希望对你有一定的参考价值。

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

  

  placeholder属性适用于下面的表单input类型:text、search、url、tel、email 和 password。IE10、Firefox、Opera、Chrome 和 Safari 支持 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占位文字样式的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 Placeholder占位文字添加CSS样式的主要内容,如果未能解决你的问题,请参考以下文章

PlaceHolder的两种实现方式

HTML5 输入 type=number 和 placeholder 属性

将 HTML5 占位符文本添加到文本框 .net

用于输入占位符的 HTML5 图像图标

自定义UITextView的placeholder(占位文字)

UITextView占位文字(placeHolder)