Menu
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?
356
In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.
Change Input Placeholder Text with CSS You can use the ::placeholder pseudo-element to change the styles of the placeholder text, which includes the ability to change the background. The code in this example uses a Sass function to generate code for support in older browsers as well.
The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field. Tip: The default color of the placeholder text is light grey in most browsers.
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
67
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.
15
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.
8
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
