Select Cuts Off Options In IE (Fix)

Chris Coyier //

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.

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.