使用 CSS 變更 HTML 輸入的佔位符顏色

Question

Chromev4支援input[type=text]元素上的佔位符屬性（其他可能也這樣做）。但是，下列CSS不會對佔位符的值執行任何操作：input[placeholder],[placeholder],*[placeholder]{color:red!important;}<inputtype="text"placeholder="Value"&gt

P粉680087550 · Answer

/* 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和textarea佔位符設定樣式。

重要說明：不要將這些規則分組。相反，為每個選擇器製定單獨的規則（群組中一個無效的選擇器會使整個群組無效）。

P粉765684602 · Answer

實作

共有三種不同的實作：偽元素、偽類和無。

WebKit、Blink（Safari、Google Chrome、Opera 15 ）和 Microsoft Edge 使用偽元素：::-webkit-input-placeholder。 ^[參考]
Mozilla Firefox 4 到 18 使用偽類別：:-moz-placeholder（一個冒號）。 ^[參考]
Mozilla Firefox 19 使用偽元素：::-moz-placeholder，但舊的選擇器仍將工作一段時間。 ^[參考]
Internet Explorer 10 和 11 使用偽類別：:-ms-input-placeholder。 ^[參考]
2017 年4 月：大多數現代瀏覽器支援簡單的偽元素::placeholder ^[Ref]

Internet Explorer 9 及更低版本根本不支援 placeholder 屬性，而 Opera 12 及更低版本不支援任何占位符的 CSS 選擇器。

關於最佳實施方案的討論仍在繼續。請注意，偽元素的行為就像陰影中的真實元素一樣DOM。 input 上的 padding 將不會獲得與偽元素相同的背景顏色。

CSS 選擇器

使用者代理程式需要忽略具有未知選擇器的規則。請參閱選擇器等級 3：

因此我們需要為每個瀏覽器製定單獨的規則。否則整個群組將被所有瀏覽器忽略。

::-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;
}