Html 如何更改<；的字体大小；选项>；内部元素<；选择>；？

我已经建立了一个我正在做的例子

我想做的事情在Firefox中运行良好。打开选择选项时，字体大小为14px

然而，在谷歌Chrome中，它选择了继承的字体大小34px

我最理想的选择是字体大小14px

这可能吗

如果需要，我愿意在jQuery中进行任何相关的修复

谢谢

下面列出的代码

.styled选择{
溢出：隐藏；
高度：74px；
浮动：左；
宽度：365px；
右边距：10px；
背景：url(http://i50.tinypic.com/9ldb8j.png)无重复右中#5c；
}
.样式选择{
字体大小：34px；
边界半径：0；
边界：无；
背景：透明；
宽度：380px；
溢出：隐藏；
填充顶部：15px；
高度：70像素；
文本缩进：10px；
颜色：#ffffff；
-webkit外观：无；
}
.styled选择选项.service-small{
字体大小：14px；
填充物：5px；
背景：#5c；
}

服务区？
志愿服务
伙伴关系及；支持
商业服务

一种解决方案是将选项包装在其中：

optgroup{font size:40px；}

服务区？
志愿服务
伙伴关系及；支持
商业服务

---

我认为这是因为您在类代码的开头使用了.styled select。

与HTML中的大多数表单控件一样，将CSS应用于

和

元素的结果在浏览器之间有很大差异。正如您所发现的，Chrome不允许您直接将字体样式应用于

元素——如果您检查它上面的元素，您会看到

字体大小：14px

声明被交叉，好像它被级联覆盖了一样，但实际上是因为Chrome忽略了它

但是，Chrome允许您将字体样式应用于，因此为了获得所需的结果，您可以将所有

包装在

中，然后将字体样式应用于

。styled select optgroup

选择器。如果你想要optgroup sans标签，你可能需要做一些聪明的CSS来定位或者隐藏标签顶部的白色区域，但是这应该是可能的

转向一个新的JSFIDLE，向您展示我的意思：

---

太棒了。这可能是我的下一个想法。感谢您的支持，它在Chrome（我相信是v28）、Safari、IE等浏览器中运行。我必须试着找出它的bug报告在Chrome上的什么地方工作，而不是IE11。我想我们无法更改选项HTML标记的样式这似乎对最新版本的Chrome不起作用，有什么建议吗？对我来说，它似乎在Firefox和Chrome中都起作用（它只更改选项的字体大小，而不更改控件）可能与我知道这是一个旧的问答（~2013年），但我想与大家分享我刚刚发现的一个在所有（大多数）浏览器上都有效的解决方案：Jeff Hays@robido.com于2015年9月22日发布，我首先发现了这个stackoverflow Q&a，所以我想与稍后可能遇到这个问题的其他人分享我的发现。你在问题中说这在Firefox中有效，但我认为它在Firefox中不再有效。字体大小选项的设置对我不起作用：(

.service-small option {
    font-size: 14px;
    padding: 5px;
    background: #5c5c5c;
}