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

Question

How to change font color in input text without affecting placeholder font color in Internet Explorer 11?

If I change the font color of the input ( Fiddle ):

HTML

 <div class="buttonToolbar"> <input type="text" placeholder="eg 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; } 

Placeholder text is no longer gray by default in Internet Explorer 11:

But it displays as we would like in Chrome 35:

Bonus Chatter

If I do not create an input style, then the input field has no style. The change:

 .buttonToolbar input { color: Blue; } 

to

 .buttonToolbar { color: Blue; } 

means the placeholder text now does what it should:

but now the color of the text does not do what it should do:

What I need to do is figure out how to change the input background color of HTML5 using CSS.

Reading bonuses

• Change HTML5 input placeholder color with CSS

Answer 1

Your selector selectors should be more specific as shown 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/

Answer 2

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

 color: GrayText !important; 

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

If you do not want to use! importantly, it can at least start you in the right direction to solve your problem. It could be something about pseudo-elements and the priority of classes over them. ( Why can't I override existing pseudo-elements? )