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

In general, when styling placeholders

When encountering an unsupported vendor prefix, CSS parsing engines will consider the entire rule invalid, which is why a separate ruleset for each vendor prefix is required. Additionally, I found that IE11 requires the !important flag to override the default user agent styles:

/* - Chrome ≤56,    - Safari 5-10.0    - iOS Safari 4.2-10.2    - Opera 15-43    - Opera Mobile 12-12.1    - Android Browser 2.1-4.4.4    - Samsung Internet ≤6.2    - QQ Browser */ ::-webkit-input-placeholder {     color: #ccc;     font-weight: 400; }  /* Firefox 4-18 */ :-moz-placeholder {     color: #ccc;     font-weight: 400; }  /* Firefox 19-50 */ ::-moz-placeholder {     color: #ccc;     font-weight: 400; }  /* - Internet Explorer 10–11    - Internet Explorer Mobile 10-11 */ :-ms-input-placeholder {     color: #ccc !important;     font-weight: 400 !important; }  /* Edge (also supports ::-webkit-input-placeholder) */ ::-ms-input-placeholder {     color: #ccc;     font-weight: 400; }  /* CSS Pseudo-Elements Level 4 Editor's Draft    - Browsers not mentioned in vendor prefixes    - Browser of newer versions than mentioned in vendor prefixes */ ::placeholder {     color: #ccc;     font-weight: 400; } 

Only IE11 seems to need the !important flag.

Check browser support at CanIUse

The solution for your particular problem

In your example you would need these rulesets for IE11:

#search:-ms-input-placeholder {     color: #898F9C !important; /* IE11 needs the !important flag */ }  /* (...) Other vendor prefixed rulesets omitted for brevity */  #search::placeholder {     color: #898F9C; } 

Answer 2

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.