Question

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

过去，我使用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>

Answer 2

<optgroup>对您的目的没有用。第一次选择具有[label]属性：<optgroup label="...>没有它，这几乎是对齐的麻烦。第二个选择没有<optgroup>。

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

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

Answer 3

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

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

请尝试以上操作。希望这对您有所帮助。谢谢。：）

更改选择框字体大小会影响选项项目的长度

3 个答案: