Reading the SO posting "Change an input's HTML5 placeholder color with CSS" I think I understand how to do it with an external CSS.
Even after searching through Google and SO I found no way to make this also work with inline CSS (I'm aware that inline CSS should be avoided).
E.g. something like:
<input type="text" placeholder="Enter something" style="???" />
For the ???
part I have no idea what to enter in order to change the color of the placeholder text.
So my question is:
Is it possible to use inline CSS to change the color of a placeholder text? If yes, how to do it?
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.
The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.
As far as I know, you certainly cannot. But you can do this with css
input::-webkit-input-placeholder { /* WebKit browsers */
color: #fff;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff;
}
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