jquery - 更改选择框字体大小影响选项项长度

Question

我需要在 html 中选择一个矩形和大字体。所以我更改了选择元素的字体大小，但如果我将它设置得太大，它会影响选项宽度并且看起来很糟糕。

过去我使用过 SelectBoxIt，但它似乎被遗弃了，并且在最新的 jQuery 中根本不起作用。

如何修复它，或者可能有人建议使用任何替代 SelectBoxIt 的方法来实现相同的功能？

这是代码片段:

    .bigselect {
        font-size: 48px;
        width: 85px;
        height: 90px;
        max-width: 85px;
    }
    
    .bigelements {
        font-size: 1em;
        width: 85px;    
    }
    
    .afire
    {
        color: red;
    }

    <select class="bigselect">
    <optgroup class="bigelements">
    
    <option>乙</option>
    <option>丙</option>
    <option class="afire">丁</option>
    <option>戊</option>
    <option>己</option>
    <option>庚</option>
    <option>辛</option>
    <option>壬</option>
    <option>癸</option>
    </optgroup>
    </select>

这里是 jsfiddle - https://jsfiddle.net/3rsLdhab/

Answer 1

.bigselect{
   font-size: 48px;
    width: 85px;
    height: 90px;
    max-width: 85px;
          position :relative; 
    }
.bigselect  option{
  width:20px;
  height:20px;
  font-size:20px;
}


.afire
{
    color: red;
}

<select class="bigselect">
                                   <optgroup class="bigelements">

<option>乙</option>
<option>丙</option>
<option class="afire">丁</option>
<option>戊</option>
<option>己</option>
<option>庚</option>
<option>辛</option>
<option>壬</option>
<option>癸</option>
</optgroup>
                                 </select>