Weird CSS issues with Internet Explorer 8 on <select> elements when using min-width

Posted by Dan on Sep 20, 2010 @ 2:26 PM

IE8 has this weird min-width issue with the <select> element, where the box model on the <select> element correctly honors the min-width style property, but the actual <option> elements when using a multiple <select> element end up using the maximum width of the widest <option> element.

Setting the width on the <option> elements has no effect and I want a pure CSS solution.

Here's an example of the bug:

Single selects work as expected

Multi-selects do not work as expected

Here's what the CSS looks like:

<style type="text/css">
    select {
        min-width: 100px;
    }
</style>

Does anyone know a pure CSS solution to fixing the <option> elements so that they inherit the width of the <select> element?

Here's what it looks like in Internet Explorer 8:

image

Notice how the selected elements don't span to the edge of the select element.

Here's how I would expect it to look:

image

Categories: HTML/ColdFusion

2 Comments

  • Use WIDTH instead of MIN-WIDTH. I don't think there is a better solution.
  • This problem looks like it persists in the IE9 Beta. If you look closely, the focus state outline of the options themselves are cut off, meaning that the white space isn't simply that the options aren't spanning the select, the rendering is actually being cut off somehow.

Add Comment

Leave this field empty