Question

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

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

我该怎么做？

Answer 1

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

Answer 2

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

select { width: 100px; }

option list is wider than the select

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

Answer 3

很遗憾，您无法使用默认选择框执行水平滚动条。您可以尝试使用Select2或Chosen之类的javascript替代品。这两种方法都允许您使用CSS格式化下拉选项，您应该能够控制它们的格式。

是否可以在html选择框中添加水平滚动条？

3 个答案: