如何更改 <select> 中的 <option> 元素的字体大小？答案

【问题标题】：How do I change the font-size of an <option> element within <select>?如何更改 <select> 中的 <option> 元素的字体大小？
【发布时间】：2025-12-29 16:30:12
【问题描述】：

我已经建立了this fiddle 作为我正在做的一个例子。

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

但是在 Google Chrome 中查看它会选择继承的 34px 字体大小。

理想情况下，我希望选择字体大小为 14px。

这可能吗？

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

谢谢

代码如下......

.styled-select {
    overflow: hidden;
    height: 74px;
    float: left;
    width: 365px;
    margin-right: 10px;
    background: url(http://i50.tinypic.com/9ldb8j.png) no-repeat right center #5c5c5c;
}

.styled-select select {
    font-size: 34px;
    border-radius: 0;
    border: none;
    background: transparent;
    width: 380px;
    overflow: hidden;
    padding-top: 15px;
    height: 70px;
    text-indent: 10px;
    color: #ffffff;
    -webkit-appearance: none;
}

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

<div class="styled-select">
    <select class="service-area" name="service-area">
        <option selected="selected" class="service-small">Service area?</option>
        <option class="service-small">Volunteering</option>
    <option class="service-small">Partnership &amp; Support</option>
        <option class="service-small">Business Services</option>
    </select>
</div>

【问题讨论】：

How to style a select tag's option element?的可能重复
我知道这是一个古老的问答（~2013 年），但我想分享一个很棒的解决方案，我刚刚发现它确实适用于所有（大多数）浏览器：Pure CSS select dropdown style – override the default select dropdown styles with CSS 9 月 22 日发布， 2015 by Jeff Hays @ robido.com 我首先发现了这个 * Q&A，所以想与以后可能会遇到这个问题的其他人分享我的发现。
您在问题中说这适用于 Firefox，但我认为它不再适用于 Firefox。

标签： html css

【解决方案1】：

一种解决方案可能是将选项包装在 optgroup 中：

optgroup { font-size:40px; }

<select>
  <optgroup>
    <option selected="selected" class="service-small">Service area?</option>
    <option class="service-small">Volunteering</option>
    <option class="service-small">Partnership &amp; Support</option>
    <option class="service-small">Business Services</option>
  </optgroup>
</select>

【讨论】：

当时它在 Chrome（我相信是 v28）、Safari、IE 等中工作。我将不得不尝试找出它的错误报告在哪里
适用于 Chrome，但适用于 IE11。我想我们不能改变 Option HTML 标签的样式
这似乎不适用于最新版本的 Chrome，有什么建议吗？
它对我来说似乎在 Firefox 和 Chrome 中都有效（它只改变选项的字体大小，而不是
在 Chrome 95 中不适合我

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

与 HTML 中的大多数表单控件一样，将 CSS 应用于 <select> 和 <option> 元素的结果在不同浏览器之间存在很大差异。正如您所发现的，Chrome 不会让您直接将字体样式应用到 <option> 元素 --- 如果您在其上执行 Inspect Element，您会看到 font-size: 14px 声明被穿过，就好像它是被级联覆盖，但实际上是因为Chrome忽略了它。

但是，Chrome 将允许您将字体样式应用于<optgroup> element，因此要获得您想要的结果，您可以将所有<option>s 包装在<optgroup> 中，然后应用您的.styled-select optgroup 选择器的字体样式。如果你想要 optgroup sans-label，你可能需要做一些巧妙的 CSS 定位或隐藏顶部显示标签的白色区域，但这应该是可能的。

分叉到一个新的 JSFiddle 以向您展示我的意思：

http://jsfiddle.net/zRtbZ/

【讨论】：