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