On Edge Browser, how to change input placeholder text color using CSS?

Question

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?

Have you tried the `-webkit` version I think that mightbe a fallback for IE-Edge? — Paulie_D, Aug 19 '15 at 12:55

score 42 · Accepted Answer · edited Jun 20 '20 at 09:12

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 19 '15 at 12:59

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

score 15 · Answer 2 · answered Jun 21 '18 at 16:22

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.

answered Jun 21 '18 at 16:22

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

score 8 · Answer 3 · edited Sep 24 '15 at 20:01

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.

edited Sep 24 '15 at 20:01

Matthew Strawbridge

19,940
10
72
93

answered Sep 24 '15 at 12:23

Stanislav Ostapenko

1,122
8
14

1

Crazy bug... still present – magicspon Sep 26 '16 at 10:59
6

`transform: scale(1)` on the input itfself worked better for me. Placeholder reappeared like magic... – Nico Prat Sep 28 '16 at 09:52

On Edge Browser, how to change input placeholder text color using CSS?

3 Answers3