How to make <option> wider than <select> in IE6?

问题

The <select> has a width of 60px,

but the content of <option> is longer than that.

Which is hidden in IE6.

How to fix that?

回答1:

I've tried to figure this out before and all I could find were javascript hacks. I found one once upon a time that worked well but I don't know where.

You could try this: http://brandonbuttars.com/2009/09/css-select-options-internet-explorer-cut-off/

Or plenty of other options on Google: http://www.google.ca/search?hl=en&safe=off&q=ie6+cutoff+select+options&btnG=Search&meta=&aq=f&oq=

回答2:

We added a button next to select which change select's width to default value, so it becomes non-limited in width.

回答3:

Short and easy answer: it´s not possible without JavaScript. And with the JavaScript-solution your layout will jump when the select gets wider.

See my comment on duplicate threads for more info.

回答4:

Unfortunately this is not possible. You could use custom scripts like this one: http://www.icant.co.uk/forreview/tamingselect/, but still - it is JavaScript based solution.

回答5:

I know this is years later but it may help someone searching for a solution.

You can do it in CSS by setting the select's width when it is in focus, e.g.

select {
    width: 100px; /* normal state */
}

and

select:focus {
    width: 200px; /* wider when in focus */
}

Full article at http://dinowebs.net/?p=114

来源：https://stackoverflow.com/questions/1727635/how-to-make-option-wider-than-select-in-ie6