Is It Possible To Add An Horizontal Scroll Bar To An Html Select Box?

I have below html code. 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 e

Solution 1:

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; }

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.

Solution 2:

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.

Solution 3:

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.