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

Question

我已经建立 了这个小提琴 作为我正在做的事情的例子。

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

但是在谷歌浏览器中查看它会选择继承的字体大小 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>

原文由 StuBlackett 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 dsgriffin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

分叉到一个新的 JSFiddle 来向你展示我的意思：

http://jsfiddle.net/zRtbZ/

原文由 David Goss 发布，翻译遵循 CC BY-SA 3.0 许可协议