如何修改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 }