Controlling the drop down list width in IE8 on sel

Question

Is it possible to control the drop down list width on select in IE8?

When the page loads I want the drop down list to be small enough to only contain the word SELECT, but when the user clicks on it to make the selection, it should expand enough to make sure all the choices are fully visible, widthwise.

FF does it, IE9 does it. But IE8 cuts off the width.

Any fixes? thanks

Answer 1

Just try to include below CSS.

select:focus{width:auto !important;}

I hope it solves your problem.

Answer 2

For IE8 you will need to use some JavaScript for this. There are JQuery plugins that do this too, but I think there is no work around without using js.

Take a look at this other SO thread for different approaches and js libraries you might use.

In my experience, the best solutions involve replacing the select element with some other HTML, CSS and JavaScript combination, as trying to change the width of the original select on certain events will move the content on the right of it.