Placeholder CSS not being applied in IE 11

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

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.

If someone came here because he can not change the font-size - Currently font-size for Placeholder is not supported on IE and Edje. it does not seem they are going to fix it any time soon. Issue #11342294

the definitions need to be seperated.

eg:

#search
{
    color:blue;
}

#search::-webkit-input-placeholder {
   color: red;
}

#search:-moz-placeholder {
   color: red;
}

#search::-moz-p {
   color: red;
}

#search:-ms-input-placeholder {
   color: red;
}

See here: http://jsfiddle.net/DLGFK/203/