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

Question

I can't change the input placeholder color in Edge Browser.

:-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 any way to make it work using CSS?

Mcgee

Have you tried the -webkit version I think that mightbe a fallback for IE-Edge? – Garda

Yes, I tried. Didn't worked. – Mcgee

Please do not rollback grammar fixes! – Nematic

Answer 1

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

Garda

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

Answer 2

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.

Transfigure

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. – Politicize

That's fascinating- thanks for the clarification. Is this also how IE <=11 operate? – Transfigure

It is how most browsers operate. See: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set? – Unoccupied

Answer 3

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.

Surrebuttal

Crazy bug... still present – Thyme

transform: scale(1) on the input itfself worked better for me. Placeholder reappeared like magic... – Ers