HTML选择器字体大小

Question

我在OS X Safari和Chrome上设置HTML <select> 的字体大小遇到了麻烦。基本上这个属性被忽略，除非我放大或缩小页面，然后这个属性就会奇迹般地被识别出来。有人遇到相同的问题/知道解决方法吗？在OS X Firefox中运行正常，这让我觉得这是一个Webkit的问题。

- Justin

---

你可以发布你的代码和/或提供一些截图吗？ - slhck

你可能需要使用“-webkit-appearance: none;”来关闭默认样式。 - drudge

Answer 1

我也遇到过这个问题，发现比 -webkit-appearance:none 更好的解决方案（没有额外样式的情况下看起来很笨拙）。如果设置了边框颜色，您可以保持标准的webkit外观而使字体大小更大。

select {
    font-size:1.2em;
    border-color:#999; /* without this, it won't work */
}

相当愚蠢，但至少它能够在Chrome和Safari中正常工作。

- wtbgtr

---

我很愿意理解这背后的推理。 - Bill Criswell

如果您不想调整默认边框，也可以添加透明阴影： font-size: 18px; -webkit-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent; - allicarn

看起来可以是任何 border 属性，除了 border-collapse - 特别不太可能与页面样式冲突的是 border-image: 0 或 border-image: repeat。如果使用无形的 box-shadow 解决方案，则可以将其缩短为 box-shadow: 0。顺便说一句，outline 不起作用。 - henry

任何导致控件重绘的属性更改都可以解决问题。background也可以起作用。有趣的是，如果您将属性设置为与用户代理样式表应用的相同值，则不会产生影响。事实上，浏览器必须实际更改元素的显示才能触发新的渲染。 - Neil Monroe

Answer 2

您需要使用以下代码关闭默认操作系统样式：-webkit-appearance: none;
（如果您正在制作高度定制化的下拉菜单，则这基本上是完整的样式重置。）

在线演示

---

您还可以尝试：-webkit-appearance: menulist-button;
（虽然我不确定其他样式效果会如何影响它。）

- drudge

---

修复Safari，不修复Chrome！ - Justin

@Justin：它应该修复 Chrome.. 或许你可以发布一下你的代码，这样我们就可以明确地看到正在发生什么，而不是猜测？此外，这个链接解释了哪些CSS属性被支持。 - drudge

我撒谎了。Chrome已经修好了。文件需要一段时间才能正确部署。非常感谢。 - Justin

谢谢。功能完美。 - user352353