Javascript – Dropdownlist width in IE

drop-down-menuhtmlinternet-explorerjavascript

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?

Best Solution

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.