Placeholder CSS not being applied in IE 11

Question

I am getting some problem in applying placeholder css.

I am trying to apply css (i.e. color:#898F9C;) on input-box placeholder using pseudo-class selector :-ms-input-placeholder, but it's not working in IE.

Demo

After some hit and try, I get solution of my problem, but it's amazing.

If i removed the default css/style color on input-box, placeholder css working properly in IE(It's amazing behavior of Internet Explorer).

My default css/style:

#search
{
    color:blue;
}

Working-fiddle without input-box default css

My question is, why it's not working with default CSS in IE?

Answer 1

Further to what Raj answered, when using vendor prefixes the selectors need to be separated into their own rule sets for each prefix.

The reason for this is that to enable the CSS language to advance, browsers need to drop selectors or declarations they do not understand. This allows new features to be be added without the worry that old browsers will interpret it in a different way other than just dropping it.

When using the comma combinator to combine the various pseudo classes, you turn it into one selector, and the browser needs to understand the entire thing to apply that rule set.

Instead you should make a new rule set for each vendor prefixed pseudo class/element. Unfortunately it is a lot of repetition, but that is the price for using experimental CSS.