Select box html horizontal scroll

Question

I want use select box and when overflow then show scroll in select box

css

#selectbox{
 width:100%;
 overflow: scroll;
 }

HTML

<div style="width:140px;">
    <select name="selectbox" size="5"  id="selectbox">
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
        <option value="1">one two three four five six</option>
        <option value="2">seven eight</option>
        <option value="3">nine ten</option>
    </select>
</div>

but show just vertical scroll.How can solve this problem?

Solution 1

To see these changes quickly:see here

These are the changes:

1. First see that I've changed the css from selectbox to that of div.This is because we want to allow scrolling on our div rather than in the selectboxes.

2. Use

   overflow-x:auto;
   overflow-y:auto;
   

3. Setting width for div to see the scrolling at work.

4. Removed width here, as it conflicts previous definition.

To see working demo: see here

Solution 2

All other answers what i searched cant fully hide embedded vertical scrollbar when you try these div tricks (and you got weird double vertical scrollers), at least in Firefox. So i made one, which works, you can have vertical and horizontad scrollbars but i tested only in FF. another issue is what when you move selection by pressing up & down keys and it goes beyond visible area it didnt scroll automatically, so you need to provide your additional JS code to handle that.

.block1 {
  max-width: 100px; 
  max-height: 100px; 
  overflow:auto;
  display: block;
}

.block2 {
  display: inline-block; 
  vertical-align: top; 
  overflow: hidden; 
  border-right: 1px solid #a4a4a4;
}

<div class="block1">
    <div class="block2">
      <select multiple style="margin-right:-17px" size="11">
        <option>123</option>
        <option>1234</option>
        <option>12345</option>
        <option>123456</option>
        <option selected>12345777777777777777777777777777</option>
        <option>123458</option>
        <option>123459</option>
        <option>12345</option>
        <option>1234</option>
        <option>123</option>
        <option>12</option>
      </select>
  </div>
</div>