Dropdownlist width in IE

Question

In IE, the dropdown-list takes the same width as the dropbox (I hope I am making sense) whereas in Firefox the dropdown-list's width varies according to the content.

This basically means that I have to make sure that the dropbox is wide enough to display the longest selection possible. This makes my page look very ugly :(

Is there any workaround for this problem? How can I use CSS to set different widths for dropbox and the dropdownlist?

Answer 1

Here's another jQuery based example. In contrary to all the other answers posted here, it takes all keyboard and mouse events into account, especially clicks:

if (!$.support.leadingWhitespace) { // if IE6/7/8     $('select.wide')         .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })         .bind('click', function() { $(this).toggleClass('clicked'); })         .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})         .bind('blur', function() { $(this).removeClass('expand clicked'); }); } 

Use it in combination with this piece of CSS:

select {     width: 150px; /* Or whatever width you want. */ } select.expand {     width: auto; } 

All you need to do is to add the class wide to the dropdown element(s) in question.

<select class="wide">     ... </select> 

Here is a jsfiddle example. Hope this helps.