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

Question

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?

you can't give it a horizontal scrollbar. You're only options are to either restrict its width with css, or restrict the amount of text in the options. — Kevin B, Aug 23 '13 at 14:37
why would you want a horizontal scroll bar, that seems nasty. Just make your select wider using width in CSS. — Liam, Aug 23 '13 at 14:38
@Liam, if the value is too large then everything cannot be accoommodated right? — user755806, Aug 23 '13 at 14:38
Of course! The alternative will be to wrap you select box in a div with a specific width and overflow auto. Take a look at this answer: http://stackoverflow.com/a/7918399/439427 — Rubens Mariuzzo, Aug 23 '13 at 14:38
If i take the div then it would become the list box which i dont want.. — user755806, Aug 23 '13 at 14:40
You might consider using jQuery for this. Its almost impossible without that. — Afzaal Ahmad Zeeshan, Aug 23 '13 at 14:44
okay..is there any jquery plugin that i can use to get horizontal scroll bar? Thanks! — user755806, Aug 23 '13 at 14:44

score 1 · Answer 1 · answered Aug 23 '13 at 14:38

1

You can't. The native controls are completely governed by the browsers HTML renderer. You'll need to look at a <select> styling plugin if you want to style the dropdown.

answered Aug 23 '13 at 14:38

Rory McCrossan

331,213
40
305
339

score 1 · Accepted Answer · edited May 23 '17 at 10:30

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 list is wider than the select

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.

score 0 · Answer 3 · answered Aug 23 '13 at 14:40

Unfortunately you cant do horizontal scrollbars using the default select boxes. You could try using a javascript replacement like Select2 or Chosen. Both of these allow you to format the dropdown options with CSS and you should be able to control their formatting however you like.

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

3 Answers3

Linked