如何修改HTML5 input placeholder 颜色

有三种实现方式：伪元素（pseudo-elements）、伪类（ pseudo-classes）和Notihing。 
WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素

::-webkit-input-placeholder

:-moz-placeholder

::-moz-placeholder

:-ms-input-placeholder

因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定。

 1 ::-webkit-input-placeholder { /* WebKit browsers */
 2 color: #999;
 3 }
 4 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 5 color: #999;
 6 }
 7 ::-moz-placeholder { /* Mozilla Firefox 19+ */
 8 color: #999;
 9 }
10 :-ms-input-placeholder { /* Internet Explorer 10+ */
11 color: #999;
12 } 

textareas（文本框可拉伸）风格样式的代码，如下：

1 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
2 color: #636363;
3 }
4 input:-moz-placeholder, textarea:-moz-placeholder {
5 color: #636363;
6 } 

input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定，不要打包整体处理，因为其中一个出问题，其他的都会失效。

 1 *::-webkit-input-placeholder {
 2 color: red;
 3 }
 4 *:-moz-placeholder {
 5 color: red;
 6 }
 7 *:-ms-input-placeholder {
 8 /* IE10+ */
 9 color: red;
10 } 

在Firefox和IE里，正常input文本颜色覆盖占位符颜色的方法：

 1 ::-webkit-input-placeholder {
 2 color: red; text-overflow: ellipsis;
 3 }
 4 :-moz-placeholder {
 5 color: #acacac !important; text-overflow: ellipsis;
 6 }
 7 ::-moz-placeholder {
 8 color: #acacac !important; text-overflow: ellipsis;
 9 } /* for the future */
10 :-ms-input-placeholder {
11 color: #acacac !important; text-overflow: ellipsis;
12 } 

还有一种好办法:

 1 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
 2 color: #666;
 3 }
 4 input:-moz-placeholder, textarea:-moz-placeholder {
 5 color: #666;
 6 }
 7 input::-moz-placeholder, textarea::-moz-placeholder {
 8 color: #666;
 9 }
10 input:-ms-input-placeholder, textarea:-ms-input-placeholder {
11 color: #666;
12 }