是否可以向 html 选择框添加水平滚动条？ [复制]答案

【问题标题】：Is it possible to add an horizontal scroll bar to an html select box? [duplicate]是否可以向 html 选择框添加水平滚动条？ [复制]
【发布时间】：2013-08-26 15:52:56
【问题描述】：

我有以下 html 代码。

<!DOCTYPE html>
<html>
  <body>
    <select>
      <option value="volvo">Volvoooooooooooooooootooooooolargeeeeeeeeeeee</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </body>
</html>

问题是当它超出页面时，它会给出垂直滚动条。但问题是如果值太大，则选择框宽度会自动扩展以适应值的宽度。但我不希望它扩大。 如果选项值太大，我想要一个水平滚动条。

我该怎么做？

【问题讨论】：

你不能给它一个水平滚动条。您唯一的选择是使用 css 限制其宽度，或限制选项中的文本数量。
你为什么想要一个水平滚动条，这看起来很讨厌。只需使用 CSS 中的宽度使您的选择更宽。
@user755806 是的，不要使用选择。
当然！另一种方法是将您的选择框包装在具有特定宽度和溢出自动的 div 中。看看这个答案：stackoverflow.com/a/7918399/439427
标准 HTML 无法实现您想要的。

标签： javascript jquery css html

【解决方案1】：

正如其他人所说，这是不可能的。但是，如果您的目标只是使select 变小，同时保持选项完全可见，则不需要在选项列表上添加滚动条。如果您通过 CSS 限制 select 的宽度，您将看到浏览器自动使选项列表的整个宽度可见。

select { width: 100px; }

编辑：请参阅 my previous answer 关于此主题。如有必要，Firefox、Chrome 和 IE10 将使选项列表比select 更宽，但 IE9 不会。该问题的其他答案链接到此问题，并修复了旧 IE：Dropdownlist width in IE。

【讨论】：

【解决方案2】：

你不能。本机控件完全由浏览器 HTML 渲染器控制。如果您想为下拉菜单设置样式，则需要查看 <select> 样式插件。

【讨论】：

【解决方案3】：

不幸的是，您不能使用默认选择框来做水平滚动条。您可以尝试使用 Select2 或 Chosen 之类的 javascript 替换。这两种方法都允许您使用 CSS 设置下拉选项的格式，并且您应该能够随意控制它们的格式。

【讨论】：