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:

Add Comment

Leave this field empty

Name:

Email Address:

Website:

Comments:

Enter text that you see in the image:

Remember My Information
Subscribe

If you subscribe, any new posts to this thread will be sent to your email address.