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;
}