CODEWITHSUNDEEP
css
Randomblue
Randomblue

Reputation: 116403

Reduce input placeholder CSS

This is my CSS:

#login-box ::-webkit-input-placeholder {
    color: #666;
}

#login-box :-moz-placeholder {
    color: #666;
}

#login-box ::-moz-placeholder {
    color: #666;
}

#login-box :-ms-input-placeholder {
    color: #666;
}

I've tried to reduce it as follows:

#login-box ::-webkit-input-placeholder,
#login-box :-moz-placeholder,
#login-box ::-moz-placeholder,
#login-box :-ms-input-placeholder {
    color: #666;
}

but that broke it.

How can I reduce the above CSS?

Upvotes: 2

Views: 104

Answers (1)

Rafael
Rafael

Reputation: 18522

You basically can't reduce it. Your try didn't work, because of a feature of CSS. When a browser doesn't understand a part of selector, it ignores the whole rule completely. For example, Firefox (obviously) doesn't understand ::-webkit-input-placeholder, so it skips everything.

If think, the only way to keep the duplicated code away from your eyes, is to use tools like LESS and some mixins like this one: http://robandlauren.com/2012/04/10/less-mixin-for-styling-html5-placeholders/ but if you need to use it only once, then sorry, I don't see a way to reduce that code without limiting browser support.

Upvotes: 2

Related Questions