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

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:

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

Here's how I would expect it to look:

Categories: HTML/ColdFusion

2 Comments

Jules Gravinese
Oct 13, 2010 @ 9:27 AM

Use WIDTH instead of MIN-WIDTH. I don't think there is a better solution.
Jon Hartmann
Oct 19, 2010 @ 4:35 PM

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.

Comments for this entry have been disabled.