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

【问题标题】：Sizing <option> independently from <select>独立于 <select> 调整 <option> 大小
【发布时间】：2017-07-12 23:09:46
【问题描述】：

我们有一个带有大型数字选择元素的站点，该元素当前设置为各种“旋转”轮，但我们需要将其更改为标准的<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>

【问题讨论】：

仅供参考：如果您将font-family: serif 添加到selectClass，您甚至会看到更多不一致。在 macOS Chrome 上，字体大小会延续到选项中，但字体系列不会！
本地选择框在不同的浏览器中显示不同，但如果你想让它在所有浏览器中看起来都一样，最好检查silviomoreto.github.io/bootstrap-select
您只能将非常有限的一组 CSS 应用到 select 的 option。因此，如果您想要真正可定制的解决方案，您最好 1) 使用 position: absolute 编写自己的块或 2) 使用一些 JavaScript 组件来实现下拉功能。
真的很沮丧他们如何处理这些，真的。我不会因为你不能设计风格而感到不安，因为有些风格被应用而有些则没有，而且在 option 和 select 之间没有独立的风格控制 - 我正在为 45 做一个地板选择器- 故事建筑 - 我希望所选楼层在屏幕上是一个大数字，但我肯定不需要下拉菜单是相同的大数字......我想在保持原生 UI 的同时做到这一点在移动。 “太糟糕了”-Chrome/Safari

标签： html css google-chrome cross-browser

【解决方案1】：

这是一个有趣的问题，我自己也遇到过，但据我所知，现在有办法实现这一目标。阅读这篇CSS Tricks 文章以获得更完整的处理。

一些浏览器会锁定某些组件，并且在没有一些严肃的魔法的情况下不会公开修改其样式的选项。另一个类似但不同的示例是checkbox，虽然您可以自定义复选框，但这样做并非易事。

我建议您按照 CSS Tricks 的作者的建议重新审视您的设计，或者您可以使用已经制定的解决方案，例如 Select2 Plugin 或 Selectize，或者您可以使用这些作为参考从头开始制作一个.

【讨论】：

感谢 jeanpier_re，看起来像是定制的。我会看看这些，可能会节省我一些在移动设备上的时间。