Controlling the drop down list width in IE8 on select

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

See [this](http://stackoverflow.com/questions/4841795/drop-down-list-in-ie8-using-select-truncates-option-text) — Christian, Apr 11 '12 at 18:39
You can also see [this](http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie) with much more info. — Christian, Apr 12 '12 at 10:58

score 7 · Answer 1 · edited Apr 22 '13 at 07:34

7

Just try to include below CSS.

select:focus{width:auto !important;}

I hope it solves your problem.

edited Apr 22 '13 at 07:34

Ankur

5,086
19
37
62

answered Apr 22 '13 at 07:15

patel vishal

81
2
5

Doesn't work for me when used in combination with DataTables; the cell width changes, the table width changes, the drop-down width stays the same and the text is still cut off =(. – justian17 May 07 '14 at 17:44
Just found this: http://stackoverflow.com/questions/4841795/drop-down-list-in-ie8-using-select-truncates-option-text: answer #1 - "IE8 does not support the :focus css selector." Supported here: http://stackoverflow.com/questions/3069435/focus-css-tag-in-internet-explorer-8. Microsoft seems to think it should work, though: http://msdn.microsoft.com/en-us/library/ie/cc304080%28v=vs.85%29.aspx – justian17 May 07 '14 at 17:54

score 2 · Accepted Answer · edited May 23 '17 at 11:51

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.

Controlling the drop down list width in IE8 on select

2 Answers2

Linked