Reducing width of wide <SELECT> list (Drop-down)

Webmasterworld.com HTML forum:
http://www.webmasterworld.com/html/3018783.htm

Trying to reduce the width of the actual drop-down list on a select when the <option>s are very wide. In Firefox only, despite setting the width for the actual <select>, the drop-down list is as wide as the widest option element, which in most cases is good (see below). In IE, the drop-down OPTIONs list is always as wide as the SELECT element. In IE6 the OPTIONs list cannot be styled. (Scripts cannot be used in this case.)

Discussion: In most cases I would have thought the default behaviour is perfectly acceptable, since the drop-down list is 'above' the content of the page and should not effect other elements.

This block is 230px wide.

Previous solution was to limit the length of the displayed text in the <option> list to say the first 60 characters and include the full text in the title attribute as a popup tooltip. But you can style the <option> elements to create this effect.

#myselect { width:230px; } #myselect option { width:220px; }

And the corresponding HTML...

<select name="myselect" id="myselect" size="0"> <option value="1">Pellentesque sit amet est dictum.</option> <option value="2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</option> etc. </select>

Q. Why is the following text indented in IE - inline with the code blocks above?! But now that I've styled this 'aside' paragraph, it is not!!?
A. I think it had something to do with the previous code block having a :first-line style (this has since been removed).

This works OK in FF1.5 (but not FF1.0), IE5+6 and Opera 8, however, FF seems to size the drop-down slightly larger than the <select> element if you specify the same width for each (setting the <option> width to 220px in this case seems to overcome this).

The width of the drop-down (as rendered on the page) cannot be forced to appear any smaller than the width of the <select>.

Specifying a width that is much smaller than the select causes FF to make text in the drop-down dissappear when you hover over it - IE6 is no different, defaulting to the width of the <select> as a minimum.


Drop down with small SELECT width, but wider OPTIONs list.

FF always makes the OPTIONs list as wide as the widest OPTION, but in IE6 the OPTIONs list is always as wide as the SELECT element, even if the OPTIONs are wider. In FF, you can use the TITLE attribute to popup a hint or even display the full text, but IE6 does not do anything with the TITLE attribute in this case.


Simply styling the SELECT combo

Difficult in IE6! Cannot change the border, or set a background image. You can, however, set the background-color. FF is much more flexible! Below, I've surrounded the SELECT list in a DIV container, and styled that instead. You can also set the background-color of OPTION elements in IE6 - but setting the background-color for all OPTIONs, sets the background-color for the SELECT box as well (in IE6).

[Home]