使用CSS修改HTML5 input placeholder顏色
本文選自StackOverflow（簡稱：SOF）精選問答匯總系列文章之一，本系列文章將為讀者分享國外最優質的精彩問與答，供讀者學習和了解國外最新技術。本文將為讀者講解HTML5 Input Placeholder Color的個性化設定，需要針對不同瀏覽器內核來編程。
問題：
David Murdoch：Chrome支持input=[type=text]占位文本屬性，但下列CSS樣式卻不起作用：
CSSinput[placeholder], [placeholder], *[placeholder] {
color
:
red
!important
;
}
<
input
type
=
"text"
placeholder
=
"Value"
/>
運行結果值還是灰色，Color：red沒有作用。有什么方法可以修改占位文本的顏色嗎？我在瀏覽器里安裝了jQuery占位文本插件，但仍然無用。
回答：
toscho：有三種實現方式：偽元素（pseudo-elements）、偽類（ pseudo-classes）和Notihing。
WebKit和Blink（Safari,Google Chrome, Opera15+）使用偽元素
::-webkit-input-placeholder
:-moz-placeholder
::-moz-placeholder
:-ms-input-placeholde
IE9和Opera12以下版本的CSS選擇器均不支持占位文本。需要注意的是偽元素在Shadow DOM里會起到元素的真實作用。
CSS選擇器
因為每個瀏覽器的CSS選擇器都有所差異，所以需要針對每個瀏覽器做單獨的設定。
::-webkit-input-placeholder {
/* WebKit browsers */
color:
#999;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color:
#999;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color:
#999;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color:
#999;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:
#636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:
#636363;
}
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
color: red;
}
*:-ms-input-placeholder {
/* IE10+ */
color: red;
}
::-webkit-input-placeholder {
color: red; text-overflow: ellipsis;
}
:-moz-placeholder {
color:
#acacac !important; text-overflow: ellipsis;
}
::-moz-placeholder {
color:
#acacac !important; text-overflow: ellipsis;
}
/* for the future */
:-ms-input-placeholder {
color:
#acacac !important; text-overflow: ellipsis;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:
#666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:
#666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:
#666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:
#666;
}
<input type=
"text"
value=
"placeholder text"
onfocus=
"this.style.color='#000';
this.value='';"
style=
"color: #f00;"
/>