2
0
0
/* do not group these rules */
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
opacity: 1;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
opacity: 1;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
*::-ms-input-placeholder {
/* Microsoft Edge */
color: red;
}
*::placeholder {
/* modern browser */
color: red;
}
<input placeholder="hello"/> <br /> <textarea placeholder="hello"></textarea>
這將為所有input和textarea占位符設(shè)置樣式。
重要說(shuō)明：不要對(duì)這些規(guī)則進(jìn)行分組。相反，為每個(gè)選擇器制定單獨(dú)的規(guī)則（組中一個(gè)無(wú)效的選擇器會(huì)使整個(gè)組無(wú)效）。
共有三種不同的實(shí)現(xiàn)：偽元素、偽類和無(wú)。
::-webkit-input-placeholder。 [參考]
:-moz-placeholder（一個(gè)冒號(hào)）。 [參考]
::-moz-placeholder，但舊的選擇器仍將工作一段時(shí)間。 [參考]
:-ms-input-placeholder。 [參考]
::placeholder [Ref]
Internet Explorer 9 及更低版本根本不支持 placeholder 屬性，而 Opera 12 及更低版本不支持任何占位符的 CSS 選擇器。
關(guān)于最佳實(shí)施方案的討論仍在繼續(xù)。請(qǐng)注意，偽元素的行為就像陰影中的真實(shí)元素一樣DOM。 input 上的 padding 將不會(huì)獲得與偽元素相同的背景顏色。
用戶代理需要忽略具有未知選擇器的規(guī)則。請(qǐng)參閱選擇器級(jí)別 3：
因此我們需要為每個(gè)瀏覽器制定單獨(dú)的規(guī)則。否則整個(gè)組將被所有瀏覽器忽略。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
