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 font. So I change font size of select element, but if I set it too large it affects options width and it looks terrible.

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

How to fix it or may be someone suggest any alternative to SelectBoxIt, that allows 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/

Coin iconoffer bounty
add comment

0 Answer

Your Answer