从<select>独立调整<option>的大小

Question

我们有一个具有大型数字选择元素的网站，该网站目前设置为“微调器”。我们需要将它更改为标准＆lt; select＆gt;＆lt; option＆gt;输入类型输入。问题是，看起来Chrome和新版本的Safari现在将下拉选项显示为与select元素相同的字体大小，其中Firefox显示了我们更喜欢的浏览器本机字体大小的下拉列表。 这似乎是代表Chrome / Safari的一种奇怪行为，因为它们不允许其他样式从（字体，颜色等）转移到其中。 这是一个演示的jsfiddle，您可以在不同的浏览器中尝试查看不同的输出。 我们真的希望坚持原生而不是设计自定义的东西来维护iOS Safari，Android Chrome等原生移动选择界面。 非常感谢任何帮助，谢谢！ ＆＃13; ＆＃13; .select-wrapper {＆＃13;   位置：相对;＆＃13;   display：block;＆＃13;   font-size：16px;＆＃13; }＆＃13; ＆＃13; .selectClass {＆＃13;   位置：相对;＆＃13;   display：block;＆＃13;     font-size：96px;＆＃13;     text-transform：uppercase;＆＃13; }＆＃13; ＆＃13; .selectClass选项{＆＃13;     font-size：16px！important;＆＃13; }＆＃13; ＆＃13; .selectClass .option-5 {＆＃13;     font-size：16px！important;＆＃13; }＆＃13; ＆lt; div class =＆＃39; select-wrapper＆＃39;＆gt;＆＃13; ＆lt; select class =＆＃34; selectClass＆＃34;＆gt;＆＃13;   ＆lt; option value =＆＃34;＆＃34;＆gt;选项1＆lt; / option＆gt;＆＃13;   ＆lt; option value =＆＃34;＆＃34;＆gt;选项2＆lt; / option＆gt;＆＃13;   ＆lt; option value =＆＃34;＆＃34;＆gt;选项3＆lt; / option＆gt;＆＃13;   ＆lt; option value =＆＃34;＆＃34;＆gt;选项4＆lt; / option＆gt;＆＃13;   ＆lt; option class =＆＃39; option-5＆＃39;值=＆＃34;＆＃34;＆gt;选项5＆lt; /选项＆gt;＆＃13;   ＆lt; option value =＆＃34;＆＃34;＆gt;选项6＆lt; / option＆gt;＆＃13;   ＆lt; option value =＆＃34;＆＃34;＆gt;选项7＆lt; / option＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆＃13; ＆＃13;

Answer 1

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

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

我建议您重新访问CSS Tricks建议的作者，或者您可以使用已经制作的解决方案，例如Select2 Plugin或Selectize，或者您可以从头开始使用这些作为参考。