CODEWITHSUNDEEP
htmlinternet-explorergoogle-chromeselectscrollbar
Zeeshan Bilal
Zeeshan Bilal

Reputation: 1247

Horizontal scroll on HTML select?

I need my select in IE 10/11 to show horizontal scroll in case it has long titled item and vertical if it has more items then usual.

I tried div with overflow-x:auto; but vertical scroll on select hides under this div and requires horizontal scrolling.

Find running reference code here.

HTML is: 

<div style="width:140px; overflow-x:auto;">
    <select name="selectbox" size="5"  id="selectbox" >
        <option>one two three four five six seven eight</option>
        <option>seven eight</option>
        <option>nine ten</option>
        <option>one two three four five six</option>
        <option>seven eight</option>
        <option>nine ten</option>
        <option>one two three four five six seven eight nine ten</option>
        <option>seven eight</option>
        <option>nine ten</option>
        <option>one two three four five six</option>
        <option>seven eight</option>
        <option>nine ten</option>
    </select>
</div>

Upvotes: 2

Views: 1916

Answers (1)

F.Baheux
F.Baheux

Reputation: 11

A similar post which is about stylizing a select element is here:

Hide vertical scrollbar in <select> element

It seems to be really difficult to stylize a select element, because he is interpreted by each browser. As you can see on this fiddle, even if it's close to your asking it's not really clean.

.bloc {
    width: 140px;
    border: 1px solid grey;
    display: inline-block;
    overflow: auto;
}

#selectbox {
    height: 100%;
    padding: 10px;
    margin:-5px -20px -5px -5px;
}

So, you can't customize your select in that way :(

Upvotes: 1

Related Questions