7

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

Community
  • 1
  • 1
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219
  • This sounds silly but.. do you have a meta tag declaring the version of IE that the user would encounter if they came on the page? I.E ` ` Would give you the most up-to-date IE, I know that IE 8/9 have difficulties displaying HTML5 properties. – BuddhistBeast Jul 02 '14 at 19:54
  • @BuddhistBeast Yes. You can also confirm on the fiddler page that IE is in *"Edge"* mode. – Ian Boyd Jul 02 '14 at 19:57

3 Answers3

4

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

Community
  • 1
  • 1
deebs
  • 1,390
  • 10
  • 23
  • 1
    Your answer led me down the rabbit hole of selector specificity. While JeremyCook solved it the way i imagine is intended, your answer introduced me to the useful `!important` hammer/gun. So for that you get an upvote. – Ian Boyd Jul 03 '14 at 18:21
  • Thank you - it has certainly helped me in a bind, even if just to test if the CSS is being overridden somewhere. – deebs Jul 04 '14 at 04:58
3

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/

Jeremy Cook
  • 20,840
  • 9
  • 71
  • 77
  • Good answer. And I see now how adding the class before the pseudo element gives it priority, as I read in the link from my post. At least I think that relates. – deebs Jul 04 '14 at 05:11
0

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.

Ambuj Khanna
  • 1,131
  • 3
  • 12
  • 32