Styling CSS placeholder attribute, the right way
For quite some time now, modern browsers allow you to style the values of an input's placeholder attribute by using the prefixed properties, like so:
input:-moz-placeholder {
color: green;
}
input::-webkit-input-placeholder {
color: green;
}
input:-ms-input-placeholder {
color: green;
}All fine and dandy. What you DON'T want to do is what most people (me included) always do at first, which is to follow de DRY principle and group these properties altogether:
input:-moz-placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder {
color: green;
}This won't work, since browsers are told to ignore an entire styling rule if one of the properties is unknown. Obviously, -webkit has no idea of what -moz is, and vice-versa... so you'll have to repeat yourself, for now.
An example: http://jsbin.com/ihiwed/3/edit
Written by Ricardo Magalhães
Related protips
3 Responses
You can use:
input:input-placeholder
To make it future-proof =)
@gustavoguichard Yes, hopefully that will be the standard. But notice that Firefox's implementation is slightly different, they're missing the 'input' word before the -placeholder... but when the standard property comes, it's likely that it will be webkit's anyway :)
Also an other pro-tip when you want to change the font color of placeholder on :focus
