Question

9

Is it possible to add an horizontal scroll bar to an html select box?

rated 0 times [ 14] [ 5] / answers: 1 / hits: 16359 / 11 Years ago, fri, august 23, 2013, 12:00:00

I have below html code.

<!DOCTYPE html>

<html>

  <body>

    <select>

      <option value=volvo>Volvoooooooooooooooootooooooolargeeeeeeeeeeee</option>

      <option value=saab>Saab</option>

      <option value=opel>Opel</option>

      <option value=audi>Audi</option>

      <option value=volvo>Volvo</option>

      <option value=saab>Saab</option>

      <option value=opel>Opel</option>

      <option value=audi>Audi</option>

      <option value=volvo>Volvo</option>

      <option value=saab>Saab</option>

      <option value=opel>Opel</option>

      <option value=audi>Audi</option>

      <option value=volvo>Volvo</option>

      <option value=saab>Saab</option>

      <option value=opel>Opel</option>

      <option value=audi>Audi</option>

      <option value=volvo>Volvo</option>

      <option value=saab>Saab</option>

      <option value=opel>Opel</option>

      <option value=audi>Audi</option>

      <option value=volvo>Volvo</option>

      <option value=saab>Saab</option>

      <option value=opel>Opel</option>

      <option value=audi>Audi</option>

      <option value=volvo>Volvo</option>

      <option value=saab>Saab</option>

      <option value=opel>Opel</option>

      <option value=audi>Audi</option>

    </select>

  </body>

</html>

The problem is when it goes beyond the page then it gives vertical scroll bar. But the problem is if the value is too large then select box width is auto expanded to accommodate the width of the value. But i don't want it to expand. I want a horizontal scrollbar to come if the option value is too large.

How can I do that?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

oswaldoh

Add To Favorites

Follow

Total Points: 109

Total Questions: 93

Total Answers: 113

Location: Israel

Member since Wed, Apr 14, 2021

3 Years ago

answered 11 Years ago grayson · Accepted Answer

As others have said, this is not possible. However, there is no need for a scrollbar on the option list if your goal is simply to make the select small while keeping the options fully visible. If you limit the width of your select through CSS, you will see that the browser automatically makes the whole width of the option list visible.

select { width: 100px; }

option

Edit: See my previous answer on this topic. Firefox, Chrome, and IE10 will make the option list wider than the select if necessary, but IE9 will not. The other answers to that question link to this question with fixes for old IE: Dropdownlist width in IE.