为HTML5 placeholder占位文字添加css样式

placerholder属性是HTML5中的新属性。


定义和用法:

       placeholder属性提供可描述输入字段预期值的提示信息。

       该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

 语法:

      <input  placeholder="text ">

 属性值:

      text规定用于验证输入字段的模式。

       简单说,就是提示用户输入什么类型的信息。

注释:

      placeholder属性适应于以下的<input >类型:text ,search,url,telephone,email以及password。

placeholder默认显示为灰色

 我们可以通过css控制placeholder文字的样式。

以下为各个浏览器厂商为其提供的伪类控制属性:



::-webkit-input-placeholder{}/*使用webkit内核的浏览器*/

::-moz-placeholder{}/*FIrefox版本19+*/

:-moz-placeholder{}/*Firefox版本4-18*/

::-ms-input-placeholder{}/*IE浏览器*/


具体实例实现:


主要代码:




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,628评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,518评论 0 6
  • 写在从深圳返家的途中。呆在一个地方已经至少两个钟了,看来十一要在路上与众位萍水相逢的同乘们一起度过了。 好了,话不...
    沐酒鸿江阅读 345评论 0 0
  • 以下是常用的代码收集,学习用。转自[豪情博客园] (http://www.cnblogs.com/jikey/p/...
    自由加咖啡阅读 1,105评论 0 1
  • 悄悄地声消。 我手捧若千层巨石般的备考书,穿上五彩斑斓的潜水衣,似一只鳗鱼般潜入了这片海洋,试图找寻那另我欣喜的宝...
    邱天阅读 251评论 0 0