How do you enable horizontal scrolling for select elements

[smithaa02]

I have some options in my select statement that are stretching it way out of proportion. Is there a way to give it fixed width and set a horizental scrollbar, so I don't lose content, but keep the width under controll?

[penders]

Assuming you are selecting from a list box (size>1) rather than a drop-down combo style...

Setting a width and overflow:scroll on the select element itself doesn't seem to work - you end up chopping off everything past your width. But you could wrap it in a DIV container and set the width and overflow properties on that. However, this only really works if you are viewing all the items in your select (size="no.of options"), otherwise you have to scroll horizontally to get at your vertical scrollbar for your list - not very usable!

#select_container {
width:150px;
/*height:125px;*/ /* IE */
overflow:auto; /* or 'scroll' */
border:2px solid #000000;
}

<div id="select_container">
<select name="myselect" id="myselect" size="6">
<option value="1">Pellentesque sit amet est dictum.</option>
<option value="2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</option>
<option value="3">Vivamus ut ipsum. Aliquam erat.</option>
<option value="4">How many more options can there be.</option>
<option value="5">Nullam convallis. Duis tristique libero.</option>
<option value="6">Donec sit amet felis. Sed.</option>
</select>
</div>

Setting overflow to 'auto' (rather than 'scroll') avoided the unnecessary extra vertical scrollbar in Firefox, but caused IE to not size the DIV vertically quite enough (forcing a vert scrollbar) - in which case you could set the height.