2

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>
Zeeshan Bilal
  • 1,147
  • 1
  • 8
  • 22

1 Answers1

1

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 :(

Community
  • 1
  • 1
F.Baheux
  • 11
  • 4
  • its does not solves the problem and post you mentioned is related to scroll bar but its about hiding, and i need to show it horizontally. Thanks anyway... – Zeeshan Bilal May 20 '14 at 05:21
  • A comment in the related post is : "No, you can't control the look of a select box in such detail. A select box is usually displayed as a dropdown list, but there is nothing that says that it always has to be displayed that way. How it is displayed depends on the system, and on some mobile phones for example you don't get a dropdown at all, but a selector that covers most or all of the screen. If you want to control how your form elements look in such detail, you have to make your own form controls out of regular HTML elements (or find someone else who has already done that)." – F.Baheux May 20 '14 at 07:54
  • So my answer is that you can't do what you are expecting actually with a select input. – F.Baheux May 20 '14 at 07:57