Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Select drop down width - Chrome issue

Tags: width select drop

Select drop down width - Chrome issue

Problem

I would like to control list width of drop down. By default, browser calculates larger text in the 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

Problem courtesy of: Tamilselvan

Solution

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

Updated Demo

Solution courtesy of: Tamilselvan

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Select drop down width - Chrome issue

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×