Search code examples
csshtmlinternet-explorer-11

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

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:

enter image description here

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

enter image description here

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:

enter image description here

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

enter image description here

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

Bonus Reading

Solution

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