html - 独立于 <select> 调整 <option> 的大小

Question

我们有一个带有大量数字选择元素的站点，该元素当前设置为各种“微调”轮，但我们需要将其更改为标准 <select><option>输入代替。问题是 Chrome 和新版本的 Safari 现在将下拉选项显示为与选择元素相同的字体大小，而 Firefox 以我们更喜欢的浏览器 native 字体大小显示下拉菜单。

这对于 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 ，或者您可以使用这些作为引用从头开始制作一个。