如何更改input中placeholder的颜色

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/foreverlikui/article/details/84372557

示例：

更改前：

更改后：

在我们经常写input时，我们一般都是使用placeholder的颜色，但是看起来真的很戳，当美工给我们设计了一个精美的input背景时，placeholder的内容就很难看清楚，我们就要对其进行更改颜色。

但是我们对input的color更改成其它颜色时，只会对input输入的内容进行赋值颜色，而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