qartal qartal - 1 year ago 109
CSS Question

Placeholder color does not take effect in IE

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:

enter image description here

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.

Answer Source

It's not pretty, but have you tried

warningPlaceHolder:-ms-input-placeholder {
    color: red!important;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download