Placeholder color does not take effect in IE

Question

I have set the placeholder color of an element in a HTML page to be red by the following code I acquired from here as the following:

.warningPlaceHolder::-webkit-input-placeholder {
    color: #CC3300;;
}
.warningPlaceHolder:-moz-placeholder {
    color: #CC3300;;
}
.warningPlaceHolder::-moz-placeholder {
    color: #CC3300;;
}
.warningPlaceHolder:-ms-input-placeholder {
    color: #CC3300;;
}

This works fine in chrome, firefox, and IE when I have a simple page, but it does not take effect in IE when I use it inside my main application which contains lots of other elements and styles. When I inspect the element in IE, I see the following in the computed styles:

as you see above it crossed out the placeholder color. I am not sure whether IE really ignored this or this is a bug! but in either case what matters is that it does not seem to really take effect!

The bellow is my HTML element that has assigned the class warningPlaceHolder as well as some other element:

<input class="gwt-SuggestBox pick-list warningPlaceHolder" id="authorizationNumberSuggestBoxsuggestBox" type="text" maxlength="30" placeholder="This Field is Required">

Question: What could cause IE ignore my placeholder color?

ps. I have other classes in the css of the document that they set the placeholder property; however, I simply expect that the closest class assigned to an element should take precedence. shouldn't it?

I am trying in IE version 11.

What version of IE are you testing in? The :-ms-input-placeholder pseudo selector will only work in IE10+. — Tom, Sep 01 '16 at 14:34
Looks like .formWidgets input... has a higher specificity, hard to tell without seeing the full markup and CSS. Have you tried adding red !important to check? — Ash Hitchcock, Sep 01 '16 at 14:36
Are you missing class selector `.` in front of classes? Shouldn't it `.warningPlaceHolder:-ms-input-placeholder` ? — Mohammad Usman, Sep 01 '16 at 14:39
@MuhammadUsman no, that was a type here, I corrected in the question. it is with dot in the main style. — qartal, Sep 01 '16 at 14:41
I'm more interested in why, if you're specifying `red` in your stylesheet, it's putting `#cc3300` instead of `#ff0000` for the color value... — Heretic Monkey, Sep 01 '16 at 14:41
Is the lack of the pseudo :: in some of the selectors also a typo? — mplungjan, Sep 01 '16 at 14:43
@MikeMcCaughan, I was sloppy, I was reading from a sass variable! it was a $red variable which is actually replaced by #CC3300; I changed in the question. — qartal, Sep 01 '16 at 14:45
You are incorrect in your assumption that the "closest class assigned to an element should take precedence". See [CSS Cascading and Specificity](http://stackoverflow.com/documentation/css/450/cascading-and-specificity#t=201609011449380092767) over on Documentation for more information. — Heretic Monkey, Sep 01 '16 at 14:50

score 2 · Accepted Answer · answered Sep 01 '16 at 14:35

2

It's not pretty, but have you tried

warningPlaceHolder:-ms-input-placeholder {
    color: red!important;
}

answered Sep 01 '16 at 14:35

Hagbourne

96
7

1

If its a lack of specificity, be more specific instead of using !important. – Tom Sep 01 '16 at 14:37
This solves the problem. This answer caused me to look for the meaning of "!important" expression that I was not aware of (see [here](https://css-tricks.com/when-using-important-is-the-right-choice/)). Thought its usage is discouraged, but as I looked at my page stylesheet code, there exist already some other "!important" tags there! so, fight began and I have to use it in my case! – qartal Sep 01 '16 at 15:04
In fact, it is still remains a question why this is not happening in chrome or firefox! – qartal Sep 01 '16 at 15:08

score 0 · Answer 2 · answered Sep 01 '16 at 14:40

You are missing the (.) in your CSS

.warningPlaceHolder::-webkit-input-placeholder {
    color: red;
}
.warningPlaceHolder:-moz-placeholder {
    color: red;
}
.warningPlaceHolder::-moz-placeholder {
    color: red;
}
.warningPlaceHolder:-ms-input-placeholder {
    color: red;
}

Try this. It works fine for me. Here's a Demo

Placeholder color does not take effect in IE

2 Answers2