Horizontal scrollbar not working on select tag

Question

I am trying to set the horizontal scrollbars on a select tag which is not working.

Here's the code:

  <select style="height: 250px; width: 300px; overflow: auto;" 
  id="dnn_ctr459_ManageRelatedProducts_lstFrom" multiple="multiple"   
  name="dnn$ctr459$ManageRelatedProducts$lstFrom" class="selectList" size="4">
     <option value="9">33 Uithoeke</option>
     <option value="10">Aantekeninge by Koos Prinsloo</option>
     <option value="11">Aantekeninge by Koos Prinsloo (enhanced e-book)</option>
     <option value="12">Access to Social Security</option>
     <option value="13">Angling for Interpretation</option>
  </select>

.selectList 
{
   height: 250px;
   overflow: auto;
   width: 300px;
}

Matt's solution results in this:

Final result in FF

Final result in IE, thanks to Matt!

Solution

Not sure if you can do that, but you can always trick it into looking like that by placing a div around the select, and setting the width and horizontal scroll on that. Taken from here.

Comments

[SixfootJames]

Thanks Chris. The problem I am having is that the the shopping cart we are using uses this select element with very long product names in it and I somehow need for this select element to scroll. Matt K's suggestion below would work but then that would mean there would be two scrollbars (vertical) and would make it very tricky to navigation. Is there a way to change the wordwrap on select elements perhaps?

[SixfootJames]

Thanks Matt...that seems to have worked. I will test this now in IE 7 and hopes this works too.

[SixfootJames]

This worked thank Matt but it does force double scrollbars in IE7. I think because Scroll-x and scroll-y don't work in IE?

[Matt K]

should work, are you implementing it correctly? take a look at this css overflow test page.

[SixfootJames]

Cool, thanks Matt. It seems in IE you have to manually switch off the the vertical scrollbar which worked!

[Chris]

@SixfootJames: Matt's solution will probably work. Personally, I would have created a vertical scrolling div with radio buttons for each option.

[Piotr Dobrogost]

You cannot force scrollbars on select elements. Citation needed.