Why is CSS text color overriding placeholder color in IE 10?

Question

Why is the color setting for -ms-input-placeholder is being overriden by the color setting for input fields? (input[type=text],input[type=password], textarea, select)

In Chrome and Firefox this works fine.

See image with blue placeholder text, even though -ms-input-placeholder is set to red.

Answer 1

Chances are your input[type=text] selector appears after your input:-ms-input-placeholder selector in your stylesheet, which is causing it to take precedence (because both selectors are equally specific). If that's the case, you'll want to move the placeholder rule below in order for that to take precedence.

The most likely reason it works in Chrome and Firefox is because they both use a pseudo-element, not a pseudo-class, to target the placeholder text, which is something different altogether.