Select drop down width - Chrome issue

Question

I would like to control <option> list width of <select> drop down. By default, browser calculates larger text in the <option> and accommodes drop down. It doesn't look good in sites. I had tried the following CSS snippet and found working in FF.

select{
    width : 120px;
}
select option {
    width : 90px;
}

The only trouble causer is Chrome. Could u let me know if any workarounds.

Demo

related, but unanswered thread: [CSS Select Dropdown Option](http://stackoverflow.com/questions/5887133/cssselect-dropdown-option) — Alex Gittemeier, Mar 06 '13 at 05:58

score 2 · Accepted Answer · answered Mar 06 '13 at 11:04

Googling it didn't turn out for me. I've only script option left out. The following code does the trick..

/* To trim the charaters in the option list */
    var optLen = $('#country option').size();
    //console.log("Total length is :" +optLen);
    for(var i=0; i<optLen; i++){
        var txt = $('#country option').eq(i).text();
        //alert(txt);
        txt = txt.substring(0,20);
        //alert(txt);
        $('#country option').eq(i).text(txt);
    }

Updated Demo

Select drop down width - Chrome issue

1 Answers1

Linked