25

On Edge Browser, I couldn't able to change input placeholder color.

:-ms-input-placeholder is not working but works fine on IE 10 & IE 11.

input:-ms-input-placeholder {
    font-style:italic;        
    color: red;
    background-color: yellow;
}

is there anyway to make it work using CSS?

Muthu Kumaran
  • 17,682
  • 5
  • 47
  • 70

3 Answers3

42

From CanIUse.com

::-webkit-input-placeholder for (Chrome/Safari/Opera)

:-ms-input-placeholder for IE.

::-ms-input-placeholder for Edge (also supports webkit prefix)

Note the double colon syntax

Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • 1
    double colon worked. Ah... I missed to try that. Thanks! – Muthu Kumaran Aug 19 '15 at 13:05
  • 7
    For my part it finaly worked on edge using input::-ms-input-placeholder{color: myColor;} . But it did not with input::-ms-input-placeholder, input:-ms-input-placeholder{color:myColor;} – ken Jan 04 '18 at 14:17
15

I want to second @ken's comment on @Paulie_D's answer, above.

This works: input[type="text"]::-ms-input-placeholder { color: #000; }

This doesn't: input[type="text"]::placeholder, input[type="text"]::-ms-input-placeholder { color: #000; }

I'm not sure why, but it definitely appears that the -ms-input-placeholder pseudo-element only works if it's separate from other directives.

David Walton
  • 221
  • 3
  • 3
  • 6
    Edge doesn't consinder ::placeholder a valid CSS and drops the entire rule. So even if you put there valid class say `.text-white, input[type="text"]::placeholder` the .text-white would have no rules applied to it for Edge while it would for all other browsers. It's something that can break sites in Edge. – Xeevis Aug 07 '18 at 18:21
  • 1
    That's fascinating- thanks for the clarification. Is this also how IE <=11 operate? – David Walton Aug 08 '18 at 20:37
  • It is how most browsers operate. See: [Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?](https://stackoverflow.com/q/16982449/501771) – Timothy003 Dec 17 '19 at 08:58
8

For the current version of the Microsoft Edge browser, placeholder doesn't work correctly. Take a look this issue Microsoft Edge placeholder bug. If placeholder is invisible, try to remove position: relative and :-webkit-input-placeholder opacity.

Matthew Strawbridge
  • 19,940
  • 10
  • 72
  • 93
Stanislav Ostapenko
  • 1,122
  • 8
  • 14