css - 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?

Answer 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