Dropdownlist width in IE

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.

Creating your own drop down list is more of a pain than it's worth. You can use some JavaScript to make the IE drop down work.

It uses a bit of the YUI library and a special extension for fixing IE select boxes.

You will need to include the following and wrap your <select> elements in a <span class="select-box">

Put these before the body tag of your page:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript"></script><script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript"></script><script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript"></script><script src="ie-select-width-fix.js" type="text/javascript"></script><script>// for each select box you want to affect, apply this:var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect</script>

Post acceptance edit:

You can also do this without the YUI library and Hack control. All you really need to do is put an onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" (or whatever you want) on the select element. The YUI control gives it that nice animation but it's not necessary. This task can also be accomplished with jquery and other libraries (although, I haven't found explicit documentation for this)

-- amendment to the edit:
IE has a problem with the onmouseout for select controls (it doesn't consider mouseover on options being a mouseover on the select). This makes using a mouseout very tricky. The first solution is the best I've found so far.

you could just try the following...

  styleClass="someStyleWidth"  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}"   onblur="this.style.position='';this.style.width=''"

I tried and it works for me. Nothing else is required.