The miscellaneous ramblings and thoughts of Dan G. Switzer, II

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;

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: