如何创建带有水平滚动条的选择元素？答案

【问题标题】：How do you create a select element with a horizontal scrollbar?如何创建带有水平滚动条的选择元素？
【发布时间】：2019-04-26 20:05:22
【问题描述】：

我正在尝试制作一个具有水平滚动条的选择元素。我尝试设置 overflow-x: scroll 属性，但它不起作用。为什么这段代码不会生成水平滚动条？

更新：它适用于 Chrome，但不适用于 Safari 或 Firefox。为什么是这样？如何让它在 Firefox 和 Safari 上运行？

select {
      height: 378px;
      width: 260px;
      overflow-x: scroll;
    }

<select multiple>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
</select>

【问题讨论】：

为我在 Chrome 中工作
@j08691 是的，它也适用于我的 Chrome。但不是 Safari 或 Firefox。（我有 Firefox ESR 52.1.0，旧版本。）
可能相关：stackoverflow.com/questions/17250724/… 和 stackoverflow.com/questions/28579095/…
没有人愿意点击打开下拉菜单然后水平滚动并尝试阅读。非常糟糕的设计，它没有得到很好的支持也就不足为奇了。也许考虑一个更合理的设计选择.. 答案是它只能在带有原生
@Jhawins 有滚动条有什么不合理的地方？您还如何处理非常长的文本？

标签： javascript html css

【解决方案1】：

HTML：

<div id="container">
<select multiple>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
</select>
</div>

CSS：

#container{ 
width:260px;
overflow-x: scroll
}

https://jsfiddle.net/vjangra/oux7ya8g

希望对你有帮助

【讨论】：

这适用于 Firefox (ESR 52.1.0) 但不适用于 Safari。呃，为什么这如此依赖于浏览器？ :(
使用支持多行格式的下拉菜单的自定义实现。您不应该在水平滚动中使用巨大的单行文本，因为用户体验是多么痛苦..