Reduce input placeholder CSS

Question

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?

this may help http://stackoverflow.com/questions/10181729/should-i-use-single-or-double-colon-notation-for-pseudo-element-css — Saju, Jan 19 '13 at 16:15

score 2 · Accepted Answer · answered Jan 19 '13 at 16:22

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.

Reduce input placeholder CSS

1 Answers1