HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

   熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari、IE)

   适用范围:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

   因为是HTML5中新增的属性,所以会存在兼容性问题。下面说说浏览器的支持情况:

   IE10+、Firefox、Opera、Chrome 和 Safari 均支持 placeholder 属性。IE9及以下版本不支持input的placeholder属性。

placeholder的用法,举例:

   <input type="text" placeholder="请输入您要搜索的内容!">

   该提示文字会有自己默认的颜色,然而有时候,我们并不希望用该默认颜色,而是想自定义颜色。那么该怎么处理呢?

   针对不同浏览器或不同版本的浏览器会有不同的写法,会添加相应的前缀。
  <style>
        input::-webkit-input-placeholder{
            color:red;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:red;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:red;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:red;
        }
  </style>
    注意:

  1. WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号,写的时候还要带上input

  2. 针对火狐浏览器则有两种写法,一种是针对低版本的,一种是针对高版本的,二者都需要带上-moz-前缀。要点1:火狐低版本的使用冒号(:),而高版本的使用双冒号(::);要点2:火狐浏览器不需要像webkit内核那样要带上input。

  3. 由于placeholder属性只在IE10+才支持,因此,针对IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input

   !!特别强调:冒号与双冒号的问题,还有是否需要加上input

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,273评论 1赞 45
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,727评论 0赞 7
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 939评论 0赞 3
  • 前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb阅读 927评论 0赞 1
  • 今日训练练胸,明显感到右胸的撕扯疼痛感,但左胸无任何疼痛感,请教资深老铁方知发力不平衡,对着镜子练时即使左...
    奔跑的Danielle阅读 248评论 0赞 1

友情链接更多精彩内容