$3.2

Change select box font size affect option items length

Ask a question+
1

I need a select in HTML to be rectangle and large in a font. So I change the font size of the select element, but if I set it too large, it affects options width, and it looks terrible.

In the past, I used SelectBoxIt, but it seems abandoned and did not work at all with the latest jQuery.

How to fix it, or maybe someone suggests any alternative to SelectBoxIt, that allows the same functionality?

Here is the code snippet:

 .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>

And here jsfiddle - https://jsfiddle.net/3rsLdhab/

add comment

0 Answer

Your Answer