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

html css placeholder microsoft-edge
Muthu Kumaran picture Muthu Kumaran · Aug 19, 2015 · Viewed 22.9k times · Source

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?

Answer

Paulie_D picture Paulie_D · Aug 19, 2015

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

Related questions

Change an HTML5 input's placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too). But the following CSS doesn't do anything to the placeholder's value: Value will still remain grey instead of red. Is there a way to change the …

Read More
How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select …

Read More
How do I auto-hide placeholder text upon focus using css or jquery?

This is done automatically for every browser except Chrome. I'm guessing I have to specifically target Chrome. Any solutions? If not with CSS, then with jQuery? Kind regards.

Read More