选择框html水平滚动

Question

我想使用选择框，当溢出时，然后在选择框中显示滚动

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>

但只显示垂直滚动。如何解决这个问题？

Answer 1

要快速查看这些更改：请参阅here

这些是变化：

1. 首先看到我已经将css从选择框更改为div。这是因为我们希望允许在div而不是选择框中滚动。
2. 使用

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

3. 设置div的宽度以查看工作中的滚动。
4. 这里删除了宽度，因为它与先前的定义冲突。

要查看工作演示：请参阅here

Answer 2

所有其他答案我搜索不能完全隐藏嵌入式垂直滚动条当你尝试这些div技巧（你有奇怪的双垂直滚动条），至少在Firefox中。所以我做了一个，有效，你可以有垂直和horizo​​ntad滚动条，但我只在FF测试。另一个问题是，当您通过按向上和向下键移动选择并超出可见区域时它没有自动滚动，因此您需要提供额外的JS代码来处理它。

.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>