如何修改placeholder的颜色

Posted 2023-05-06

参考技术A 首先我们先简单写个html页面，里面放一个input和一个textarea，简单设置一下基本样式，注意写上placeholder。然后在浏览器中预览一下效果，会看到默认的placeholder颜色是灰色的。再然后就是设置placeholder的字体颜色了，因为不同浏览器存在兼容性问题，这里主要设置webkit内核浏览器、火狐浏览器、IE浏览器三种，代码如下：上面设置的placeholder的颜色为红色，然后切换到浏览器预览一下，效果就是红色的。以上代码是设置所有input和textarea的placeholder颜色的，如果想设置某一个或某一类的文本框或者输入框的placeholder颜色，只要在最前面加上其标签名或者是class名或者是id名就可以了。

input的placeholder文字颜色修改

input::-webkit-input-placeholder {
　　color: #D6D0CA !important; /* WebKit browsers /
　　}
　　input:-moz-placeholder {
　　color: #D6D0CA !important; / Mozilla Firefox 4 to 18 /
　　}
　　input::-moz-placeholder {
　　color: #D6D0CA !important; / Mozilla Firefox 19+ /
　　}
　　input:-ms-input-placeholder {
　　color: #D6D0CA !important; / Internet Explorer 10+ */
　　}

    知识点：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
　　css伪类：CSS 伪类用于向某些选择器添加特殊的效果。
　　css伪元素：CSS 伪元素用于向某些选择器设置特殊效果。
　　伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，如:first-line,:first-letter,:before,:after等等。因此对于css2之前已经有的伪元素两种写法的作用是一样的，但是为了兼容IE浏览器还是使用单冒号的写法；