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

港控/mmm° 2023-06-01 12:51 25阅读 0赞

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

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="请输入您要搜索的内容！">

结果：

![1105097-20170726180608500-1938739299.png][]

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

![复制代码][copycode.gif]

![复制代码][copycode.gif]

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

注意：

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

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

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

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

![复制代码][copycode.gif]

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;
    }

![复制代码][copycode.gif]

转载于:https://www.cnblogs.com/angel648/p/11317615.html

[1105097-20170726180608500-1938739299.png]: /images/20230601/9000e4c4aabb4666bc6a4e81e35bbd47.png
[copycode.gif]: /images/20230601/0a7a77dec4a5421d944245fe2a5d0e59.png