How to keep width of SELECT Element small but OPTIONs flexible

Question

Problem:

My dropdown is loaded dynamically has some options that are quite long and this is messing up my page layout. I'd like the size of the select element to be small but when expanded, allow the user to see all the long options. To do this I have set the width of the SELECT to a fixed value e.g width:200px;

Expected/Desired Behavior (Works in Chrome)

Actual Behavior in IE8

What I have tried:

select{
    overflow:show;
}
option{
    overflow:show;
    width:1000px;
}

SIMPLIFIED FIDDLE:

http://jsfiddle.net/gCbhq/2/

Answer 1

Ok. Not sure if this helps. I'm using Jquery Mobile and my select button is icon-only (= 28px). On IE8 all my options hence where 28px, too.

I fixed it with this:

select { min-width: 150px !important; }

but this only works, because Jquery Mobile hides the select and adds it's own elements "on top".

Alas, here is a fix - http://css-tricks.com/select-cuts-off-options-in-ie-fix/