Horizontal Scroll on HTML ListBox (Not Container)?

Question

I have a list box with many items, some of which have long labels. Therefore, I need to scroll horizontally and vertically.

I tried putting the list box in a div and applying overflow styling to both, but this has problems. The horizontal scroll on the div scrolls the list box itself, rather than the contents. For instance, when I scroll, I end up seeing the edge of the list box with its scroll bar. Which brings up the 2nd problem; I need to horizontally scroll to get to the list box's vertical scroll bar, as the div's vertical scroll bar (if present) pans across the list box, rather than its contents.

To get an idea of what I'm talking about, try this jsFiddle in FireFox or IE (Chrome works fine).

Here's the code:

div {
  height: 100px;
  width: 300px;
  overflow: auto;
}
select {
  height: 200px;
  overflow: visible;
}

<div>
  <select multiple>
    <option>1 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>2 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>3 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>4 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>5 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>6 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>7 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>8 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>9 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>10 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>11 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>12 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>13 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>14 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>15 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>16 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>17 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>18 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>19 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>20 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>21 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
  </select>
</div>

Is there a way to get horizontal and vertical scroll bars on a list box that act on the list box content, and that works in Chrome, IE (don't worry about older versions), FireFox and Safari?

Answer 1

First set the size attribute of the select to match the number of options. Then you can add another div and use it to more or less crop out the unused scroll bar.

Working Example

.wrap {
  height: 100px;
  width: 300px;
  overflow: auto;
}
.crop {
  overflow: hidden;
  display: inline-block;
}
select {
  border: none;
  margin: 0px -20px 0px 0px; /* hide unused scroll bar */
}

<div class="wrap">
  <div class="crop"><!-- add a croping container -->
    <select multiple size="21"><!--add size attribute equal to the length of list-->
      <option>1 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>2 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>3 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>4 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>5 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>6 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>7 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>8 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>9 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>10 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>11 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>12 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>13 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>14 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>15 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>16 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>17 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>18 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>19 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>20 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>21 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    </select>
  </div>
</div>