Internet Explorer placeholder styling issue

Question

Trying to apply style to placeholder I faced a problem, that in IE (all versions) placeholder text color doesn't apply. It only takes the color of text input

:-ms-input-placeholder {  
    color: white; 
}

input {
    color:black;
}

after applying this code the color of a placeholder will be black.

What can be the problem?

score 1 · Answer 1 · answered Sep 29 '14 at 14:57

1

You need to specify this rule to specific input:

input:-ms-input-placeholder {  
    color: white; 
}

input {
    color:black;
}

From Internet Explorer Dev Center:

selector:-ms-input-placeholder {...}

Please note that this will work only on IE>10 browsers.

answered Sep 29 '14 at 14:57

antyrat

27,479
9
75
76

Are you sure compatibility mode is not enabled and your browsers works not in Quirks mode? Do you have doctype on your page? – antyrat Sep 29 '14 at 15:02
Yes - i'm sure. Doctype is also in my html – iwazovsky Sep 29 '14 at 15:10
Do you have some page example? Does this link works for you? http://jsfiddle.net/ct0Lx3t3/ . Also if you use 3rd party plugins to add placeholders for not supported browsers can you disable them and look if they caused the issue? – antyrat Sep 29 '14 at 15:12
Deleted all js additions and left css - doens't work. In jsFiddle it is working okay. Strangely, with my css for input elements. – iwazovsky Sep 29 '14 at 15:28
@eatmypants That's odd, seems like problem in another place. Do you have an live example? – antyrat Sep 29 '14 at 15:30
Unfortunately can't show it due to privacy reasons. Will try to find the solution by myself. Definitely will post it here if find one. – iwazovsky Sep 29 '14 at 15:34

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

If you're looking for support for all browsers take a look at this answer:

How to support placeholder attribute in IE8 and 9

edited May 23 '17 at 12:27

Community

1
1

answered Sep 29 '14 at 15:06

Mark Busnelli Jr

435
3
10

OP looking for styling placeholder, not for enabling it in older browsers. Also link only answers should be comments instead http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – antyrat Sep 29 '14 at 15:08
Already using it, but after I added it - the color of the IE < 10 placeholder is the same as in IE10. – iwazovsky Sep 29 '14 at 15:08
Or Marked as duplicates – antyrat Sep 29 '14 at 15:08

score 0 · Accepted Answer · answered Sep 29 '14 at 15:50

Solution:

In my css I specified for the form inputs (div_name form > input {}) color of the text which was more valuable parameter for browser than specified as selector:-ms-input-placeholder {} placeholder color. (Which is quite strange. They are for different purposes, but ok)

score 0 · Answer 4 · answered Sep 07 '18 at 10:25

IE11 requires the !important flag to override the default user agent styles.

Here is a ruleset that works for IE versions 10 and 11.

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: white !important;
}

See answer to question Placeholder CSS not being applied in IE 11 for details about all browsers.

For IE versions older than 10, you need a polyfill to even support placeholders. CSS will be different for these. Refer to a polyfill.

Internet Explorer placeholder styling issue

4 Answers4