2

我有以下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>

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

我怎样才能做到这一点？

4

3 回答 3

1

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

于 2013-08-23T14:38:37.447 回答
1

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

select { width: 100px; }

选项列表比选择更宽

编辑：请参阅我之前关于此主题的答案。Firefox、Chrome 和 IE10 将使选项列表比select必要时更宽，但 IE9 不会。该问题的其他答案链接到此问题，其中包含旧 IE 的修复： IE中的下拉列表宽度。

于 2013-08-23T14:46:38.660 回答
0

不幸的是，您不能使用默认选择框来做水平滚动条。您可以尝试使用像Select2或Chosen这样的 javascript 替代品。这两者都允许您使用 CSS 设置下拉选项的格式，并且您应该能够根据自己的喜好控制它们的格式。

于 2013-08-23T14:40:50.527 回答