在所有浏览器中覆盖占位符字体 CSS

Question

我正在尝试使用以下代码覆盖我网站上所有标题、输入、选择、文本区域和输入占位符的字体：

h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
:-ms-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
::-webkit-input-placeholder {
    font-family:some font name;
}

问题是，由于某种原因，它无法在Chrome上运行。如果我删除:-moz并:-ms引用，那么 chrome 工作正常，这让我相信 Chrome 出于某种原因不喜欢伪类？我很困惑，因为我不明白为什么与 Chrome 无关的伪类会让它不起作用！

Answer 1

您需要进行单独的声明才能在所有浏览器中工作，否则冲突将导致这样的意外结果。

h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
    font-family: somefont;
}
::-webkit-input-placeholder {
    font-family: somefont;
}
:-moz-placeholder {
    font-family: somefont;
}
::-moz-placeholder {
    font-family: somefont;
}
:-ms-input-placeholder {
    font-family: somefont;
}