独立于<select>调整<option>大小

Question

我们有一个带有大型数字选择元素的站点，它当前被设置为一个“微调”轮，但我们需要将其改为标准的<select><option>类型输入。问题是，看起来Chrome和Safari的新版本现在显示下拉选项的字体大小与select元素相同，而Firefox则以浏览器自带的字体大小显示下拉选项，这是我们更喜欢的。

对于Chrome / Safari来说，这似乎是一种奇怪的行为，因为它们不允许其他样式(字体、颜色等)继续存在。

这是一个演示的jsfiddle，您可以在不同的浏览器中尝试它，以查看不同的输出。

我们真的想坚持使用原生的，而不是设计一些自定义的东西来维护iOS Safari，Android Chrome等原生的移动选择界面。

非常感谢您的帮助，谢谢！

​

.select-wrapper {
  position: relative;
  display: block;
  font-size: 16px;
}

.selectClass {
  position: relative;
  display: block;
    font-size: 96px;
    text-transform: uppercase;
}

.selectClass option {
    font-size: 16px !important;
}

.selectClass .option-5 {
    font-size: 16px !important;
}

<div class='select-wrapper'>
<select class="selectClass">
  <option value="">Option 1</option>
  <option value="">Option 2</option>
  <option value="">Option 3</option>
  <option value="">Option 4</option>
  <option class='option-5' value="">Option 5</option>
  <option value="">Option 6</option>
  <option value="">Option 7</option>
</select>
</div>

​

Answer 1

这是一个有趣的问题，也是我自己遇到的一个问题，但据我所知，现在有办法实现这一点。阅读这篇CSS Tricks文章，可以获得更全面的治疗方法。

一些浏览器锁定了某些组件，并且如果没有一些真正的魔法，就不会公开选项来修改它们的样式。另一个类似但不同的示例是checkbox，虽然您可以自定义复选框，但这样做并不容易。

我建议要么像CSS Tricks的作者建议的那样重新审视你的设计，要么你可以使用已经做好的解决方案，比如Select2 Plugin或Selectize，或者你可以用这些作为参考从头开始做一个。