覆盖所有浏览器中的占位符字体css

时间:2013-01-25 23:12:31

标签: css placeholder pseudo-element

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

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无关的伪类会使它无效!

1 个答案:

答案 0 :(得分:13)

您需要单独声明它才能在所有浏览器中使用,否则冲突会导致不希望的结果。

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;
}