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!

Answer 1

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.