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

标签 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 无关的伪类会使它不起作用!

最佳答案

你需要单独声明它才能在所有浏览器中工作,否则冲突会导致像这样的不良结果。

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 - 在所有浏览器中覆盖占位符字体 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14531799/

相关文章:

html - 在 div 中定位 h1 时遇到问题

javascript - 图像在使用 JavaScript 更改后没有相同的 CSS 属性

c++ - qt中的占位符

IE8 的 Javascript 占位符不起作用

css - 如何在所有其他控件之上制作 div

html - CSS:如何设置从点到窗口边缘的背景?

html - 如何设置占位符值的样式,比如如果我想在该值的左侧留出边距,在 css 中要写什么?

CSS :before and :after are not working in IE8

css - 伪元素 css 背景覆盖 - 导致奇怪的线条渲染

html - 使用伪元素后的 CSS 主动选择器