覆盖所有浏览器中的占位符字体css [英] overriding placeholder font css in all browsers

问题描述

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

I am trying to override the font of all headers, input, select, text area and input placeholders on my site with the following code:

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无关的伪类会使它无法工作！

The problem is, for some reason it isn't working on Chrome. If I delete the :-moz and :-ms references, then chrome works fine, which leads me to believe that Chrome doesn't like pseudo-classes for some reason? I'm stumped, because I can't see why pseudo-classes that have nothing to do with Chrome would make it not work!

推荐答案

您需要单独声明它在所有浏览器中工作，否则冲突会导致不必要的结果。

You need to make separate declarations for it to work in all browsers, otherwise a conflict will cause undesired results like this.

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

这篇关于覆盖所有浏览器中的占位符字体css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！