减少输入占位符CSS

Question

这是我的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;
}

我试图按如下方式减少它：

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

但这打破了它。

如何减少上述CSS？

Answer 1

你基本上无法减少它。由于CSS的功能，您的尝试无效。当浏览器不理解选择器的一部分时，它会完全忽略整个规则。例如，Firefox（显然）不理解:: - webkit-input-placeholder，因此它会跳过所有内容。

如果想一想，保持重复代码远离你眼睛的唯一方法就是使用像LESS这样的工具和像这样的一些mixins：http://robandlauren.com/2012/04/10/less-mixin-for-styling-html5-placeholders/但是如果你只需要使用它一次，那么抱歉，我没有看到在不限制浏览器支持的情况下减少代码的方法。