大小 <option> 独立于 <select>

Question

我们有一个网站，其中包含大量 select 元素，目前设置为 'spinner' 轮盘，但我们需要将其更改为标准 <select><option> 类型输入代替。问题是它看起来像 Chrome 并且新版本的 Safari 现在将下拉选项显示为与 select 元素相同的字体大小，而 Firefox 以浏览器本机字体大小显示下拉菜单，我们更喜欢。

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

这里有一个jsfiddle演示，你可以在不同的浏览器中试一下，看看不同的输出。

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

非常感谢任何帮助，谢谢！

.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, or Selectize，或者您可以使用这些从头开始制作一个作为参考。

大小 <option> 独立于 <select>

Sizing <option> independently from <select>

html

css

google-chrome

cross-browser