How to set input text color, but not placeholder color, in IE11

Question

How can i change the font-color of an input text box without affecting the placeholder font color in Internet Explorer 11?

If i change the color of the font in an 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;
}

The placeholder text is no longer it's default gray-ish color in Internet Explorer 11:

But it does display as i would like in Chrome 35:

Bonus Chatter

If i don't style the input box, then the input box is not styled. Changing:

.buttonToolbar input {
    color: Blue;
}

to

.buttonToolbar {
    color: Blue;
}

means that the placeholder text now does what it is supposed to to:

but now the text color does not do what it is supposed to do:

What i need is figure out how to change an input's HTML5 placeholder color with CSS.

Bonus Reading

• Change an HTML5 input's placeholder color with CSS

Answer 1

I'm kind of new to this, and this answer may just be a quick fix... but if you add !important after the GrayText then it seems to work (in IE 10 at least).

color: GrayText !important;

Here is the fiddle http://jsfiddle.net/uc2Rj/

If you don't want to use !important this may at least start you in the right direction of solving your problem. It could it be something regarding the pseudo elements and priority of classes over them.(Why can't I override existing pseudo-elements?)

Answer 2

Your placeholder selectors need to be more specific like below.

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