如何更改placeholder属性中文字颜色

您所在的位置:网站首页 html中placeholder中文字怎么换颜色 如何更改placeholder属性中文字颜色

如何更改placeholder属性中文字颜色

2024-05-23 08:24| 来源: 网络整理| 查看: 265

如何更改placeholder属性中文字颜色

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

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

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

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

  placeholder的用法,举例:

    

  结果:

  

 方式1:因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

复制代码 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; } 复制代码

  针对不同浏览器或不同版本的浏览器会有不同的写法,会添加相应的前缀。

  注意:

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

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

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

 

方式2:建议使用该方式 如果是在手机客户端webview 只使用-webkit内核方式即可。

复制代码 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; font-size: 16px; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; font-size: 16px; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666; font-size: 16px; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; font-size: 16px; } 复制代码


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3