CODEWITHSUNDEEP
csshtmlinternet-explorer-11
Ian Boyd
Ian Boyd

Reputation: 256711

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

Upvotes: 7

Views: 8252

Answers (3)

Ambuj Khanna
Ambuj Khanna

Reputation: 1219

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

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 and 11 are using a pseudo-class: :-ms-input-placeholder. April 2017: Most modern browsers support the simple pseudo-element ::placeholder Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

Upvotes: 0

deebs
deebs

Reputation: 1410

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?)

Upvotes: 4

Jeremy Cook
Jeremy Cook

Reputation: 22063

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/

Upvotes: 3

Related Questions