一种解决方案可能是将选项包装在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>

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

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

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

http://jsfiddle.net/zRtbZ/

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

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

对我来说，我直接将样式应用于<option>标签。

例如，我正在创建自己的文本编辑器，我想显示一个选择菜单来选择标题类型。我想用每个选项的字体大小显示每个选项。例如，如果第一个选项是Header 1，那么我想要 h1 字体大小的单词 Header 1 。所以，我h1直接在 option 标签上使用了 bootstrap 类。

<option value="h1" class="h1"> Header 1 </option>