Last Updated: October 31, 2016
·
2.225K
· magalhini

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

3 Responses
Add your response

You can use:
input:input-placeholder
To make it future-proof =)

over 1 year ago ·

@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 :)

over 1 year ago ·

Also an other pro-tip when you want to change the font color of placeholder on :focus

over 1 year ago ·