用css改变placeholer的样式

今天在做项目时遇到一个需求，就是将input的background-color设置成了黑色，
然后设置input的字体颜色值设置为白色。这时候发现输入文字时，字体颜色发生了变化，
但placeholder的值，却是从来都没变过。通过搜索，发现可以用下面方法解决这个问题：

用::placeholder伪类来搞定。

1
2
3
::placeholder{
   color:red; //这就将所有的placehoder颜色设置成了红色。
}

为了兼容各类浏览器，大家还可以使用以下方法：

1
2
3
4
5
6
7
8
9
10
11
12
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;
}