Select Cuts Off Options In IE (Fix)

I think the problem is fairly obvious here. If you set a static width on the <select> element and the width of the text in the <option> are wider than that, the text gets cut off in IE 6-8. There is no good pure-CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.

• Yahoo! has a fix in their libraries. But I’m already using jQuery, didn’t want to add a bunch of extra libraries I don’t need most of.
• There is a solution with JavaScript applied via CSS behavior expressions. But those freak me out, and I was seeing major problems when I tried this (whole page didn’t want to load).
• You can use some inline JavaScript to alter the width on click. This is closer to what I want, but of course inline JavaScript is usually bad news.

What I Did

I decided the best way to handle it is to keep the static width on the select element by default, but when moused over in IE, change the width to “auto” to accommodate. And then of course put it back to static width when the user is “done”. Here that is using jQuery:

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });

In plain English:

1. Remember the original width of the select.
2. When mouse cursor goes over select element set the width to auto so it expands as needed.
3. When the field is changed or leaves focus, set width back to original width.

Of course, only IE 8 and lower need this (bug was fixed in IE 9), so I apply the script via IE conditional comments.

<!--[if lt IE 9]>
<script>
   // the fix
</script>
<![endif]-->

View Demo   Download Files

Project on GitHub

Update August 2012: There is another dedicated project to this fix called IE 8 Expand Select Width on GitHub.