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?

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=

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

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.

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.

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