javascript 是否可以将水平滚动条添加到 html 选择框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18405484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to add an horizontal scroll bar to an html select box?
提问by user755806
I have below html code.
我有以下 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>The problem is when it goes beyond the page then it gives vertical scroll bar. But the problem is if the value is too large then select box width is auto expanded to accommodate the width of the value. But i don't want it to expand. I want a horizontal scrollbar to come if the option value is too large.
问题是当它超出页面时，它会提供垂直滚动条。但问题是如果值太大，则选择框宽度会自动扩展以适应值的宽度。但我不希望它扩大。如果选项值太大，我想要一个水平滚动条。
How can I do that?
我怎样才能做到这一点？
采纳答案by Rory O'Kane
As others have said, this is not possible. However, there is no need for a scrollbar on the option list if your goal is simply to make the selectsmall while keeping the options fully visible. If you limit the width of your selectthrough CSS, you will see that the browser automatically makes the whole width of the option list visible.
正如其他人所说，这是不可能的。但是，如果您的目标只是select在保持选项完全可见的同时缩小尺寸，则选项列表上不需要滚动条。如果您限制了selectCSS的宽度，您将看到浏览器会自动使选项列表的整个宽度可见。
select { width: 100px; }
Edit:See my previous answeron this topic. Firefox, Chrome, and IE10 will make the option list wider than the selectif necessary, but IE9 will not. The other answers to that question link to this question with fixes for old IE: Dropdownlist width in IE.
编辑：请参阅我之前关于此主题的回答。Firefox、Chrome 和 IE10 将使选项列表比select必要时更宽，但 IE9 不会。该问题的其他答案链接到此问题，并修复了旧 IE: Dropdownlist width in IE。
回答by Rory McCrossan
You can't. The native controls are completely governed by the browsers HTML renderer. You'll need to look at a <select>styling plugin if you want to style the dropdown.
你不能。本机控件完全由浏览器的 HTML 渲染器控制。<select>如果要设置下拉菜单的样式，则需要查看样式插件。
回答by Matthew R.
Unfortunately you cant do horizontal scrollbars using the default select boxes. You could try using a javascript replacement like Select2or Chosen. Both of these allow you to format the dropdown options with CSS and you should be able to control their formatting however you like.
不幸的是，您不能使用默认的选择框来制作水平滚动条。您可以尝试使用 JavaScript 替代品，如Select2或Chosen。这两者都允许您使用 CSS 设置下拉选项的格式，并且您应该能够随意控制它们的格式。
