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

Question

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

如果我更改输入中的字体颜色（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中显示：

Bonus Chatter

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

.buttonToolbar input {
    color: Blue;
}

到

.buttonToolbar {
    color: Blue;
}

表示占位符文本现在可以执行以下操作：

但现在文字颜色没有按照预期的那样做：

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

奖金阅读

• Change an HTML5 input's placeholder color with CSS

Answer 1

我对此有点新鲜，这个答案可能只是一个快速修复...但是如果你在GrayText之后添加！important它似乎工作（至少在IE 10中）。

color: GrayText !important;

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

如果您不想使用！重要，这至少可以让您朝着解决问题的正确方向前进。它可能是关于伪元素和类的优先级的东西。（Why can't I override existing pseudo-elements?）

Answer 2

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

.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/

Answer 3

有三种不同的实现方式：伪元素，伪类，什么也没有。

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和更低版本完全不支持占位符属性，而Opera 12和更低版本则不支持任何CSS选择器作为占位符。

有关最佳实现的讨论仍在进行中。请注意，伪元素的行为类似于Shadow DOM中的真实元素。输入上的填充将不会获得与伪元素相同的背景色。