如何在 IE11 中设置输入文本颜色，而不是占位符颜色

Question

如何在不影响 Internet Explorer 11 中 placeholder 字体颜色的情况下更改 input 文本 框的字体颜色？

如果我更改输入中字体的颜色 (Fiddle)：

HTML：

<div class="buttonToolbar">
    <input type="text" placeholder="e.g. Stackoverflow"><br>
</div>

CSS：

.buttonToolbar input {
    color: Blue;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-style: italic;
    color: GrayText;
}
::-webkit-input-placeholder { /* WebKit browsers */
     font-style: italic;
     color: GrayText;
}

占位符文本不再是 Internet Explorer 11 中的默认灰色：

但它确实可以在 Chrome 35 中显示：

奖金聊天

如果我不对input 框设置样式，则输入框没有设置样式。改变：

.buttonToolbar input {
    color: Blue;
}

到

.buttonToolbar {
    color: Blue;
}

表示占位符文本现在执行它应该做的事情：

但是现在文本颜色没有做它应该做的事情：

我需要弄清楚如何使用 CSS 更改输入的 HTML5 占位符颜色。

阅读奖励

• Change an HTML5 input's placeholder color with CSS

Answer 1

共有三种不同的实现方式：伪元素、伪类和无。

WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. 

Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). 

Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. 

Internet Explorer 10 和 11 使用伪类：:-ms-input-placeholder。 2017 年 4 月：大多数现代浏览器都支持简单的伪元素 ::placeholder Internet Explorer 9 及更低版本根本不支持 placeholder 属性，而 Opera 12 及更低版本不支持任何 CSS 占位符选择器。

关于最佳实施的讨论仍在继续。请注意，伪元素就像 Shadow DOM 中的真实元素一样。输入上的填充不会获得与伪元素相同的背景颜色。

Answer 2

我对此有点陌生，这个答案可能只是一个快速修复...但是如果您在 GrayText 之后添加 !important ，那么它似乎可以工作（至少在 IE 10 中）。

color: GrayText !important;

这是小提琴http://jsfiddle.net/uc2Rj/

如果您不想使用 !important，这至少可以让您朝着解决问题的正确方向迈进。可能是关于类的伪元素和优先级的问题。(Why can't I override existing pseudo-elements?)

Answer 3

您的占位符选择器需要更具体，如下所示。

.buttonToolbar input {
    color: Blue;
}
.buttonToolbar input:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-style: italic;
    color: GrayText;
}
.buttonToolbar input::-webkit-input-placeholder { /* WebKit browsers */
     font-style: italic;
     color: GrayText;
}

http://jsfiddle.net/55Sfz/2/