Html 始终在 <select> 中显示垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5715705/
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
Always show vertical scrollbar in <select>
提问by Egor4eg
The following code produces a listbox with 2 options:
以下代码生成一个带有 2 个选项的列表框：
<select size="10">
<option>1</option>
<option>2</option>
</select>
Is it possible to always show a vertical scrollbar in this listbox? I'm asking this question because style="overflow-y: scroll;" doesn't work here in IE7.
是否可以始终在此列表框中显示垂直滚动条？我问这个问题是因为 style="overflow-y: scroll;" 在 IE7 中不起作用。
回答by thecodeparadox
It will work in IE7. But here you need to fixed the sizeless than the number of optionand not use overflow-y:scroll. In your example you have 2 optionbut you set size=10, which will not work.
它将在 IE7 中工作。但是在这里你需要修复size小于的数量option而不是使用overflow-y:scroll. 在您的示例中，您有 2option但您设置了size=10，这将不起作用。
Suppose your select has 10 option, then fixed size=9.
假设您的 select 有 10 个option，然后是 fixed size=9。
Here, in your code reference you used height:100pxwith size:2. I remove the heightcss, because its not necessary and change the size:5and it works fine.
在这里，在您的代码参考中，您使用height:100px了size:2. 我删除了heightcss，因为它没有必要并更改它size:5并且它工作正常。
Here is your modified code from jsfiddle:
这是您从 jsfiddle 修改的代码：
<select size="5" style="width:100px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
this will generate a larger select box than size:2create.In case of small sizethe select box will not display the scrollbar,you have to check with appropriate sizequantity.Without scrollbar it will work if click on the upper and lower icons of scrollbar.I show both example in your fiddle with size:2and sizegreater than 2(e.g: 3,5).
这将生成一个比size:2创建更大的选择框。如果size选择框较小，则选择框不会显示滚动条，您必须检查适当的size数量。没有滚动条，如果单击滚动条的上下图标，它将起作用。我同时显示例如你的小提琴size:2和size大于2（例如：3,5）。
Here is your desired result. I think this will help you:
这是您想要的结果。我认为这会帮助你：
CSS
CSS
.wrapper{
border: 1px dashed red;
height: 150px;
overflow-x: hidden;
overflow-y: scroll;
width: 150px;
}
.wrapper .selection{
width:150px;
border:1px solid #ccc
}
HTML
HTML
<div class="wrapper">
<select size="15" class="selection">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</div>
回答by ace
I guess you cant, this maybe a limitation or not included in the IE browser. I have tried your jsfiddle with IE6-8 and all of it doesn't show the scrollbar and not sure with IE9. While in FF and chrome the scrollbar is shown. I also want to see how to do it in IE if possible.
我猜您不能，这可能是 IE 浏览器中的限制或未包含的内容。我已经在 IE6-8 上尝试过你的 jsfiddle，但所有这些都没有显示滚动条，并且不确定是否使用 IE9。在 FF 和 chrome 中显示滚动条。如果可能的话，我也想看看如何在 IE 中做到这一点。
If you really want to show the scrollbar, you can add a fake scrollbar. If you are familiar with some of the js library which use in RIA. Like in jquery/dojosome of the select is editable, because it is a combination of textbox + select or it can also be a textbox + div.
如果你真的想显示滚动条，你可以添加一个假滚动条。如果您熟悉 RIA 中使用的一些 js 库。就像在jquery/ dojo 中，一些 select 是可编辑的，因为它是 textbox + select 的组合，也可以是 textbox + div。
As an example, see it herea JavaScript that make select like editable.
例如，在此处查看一个 JavaScript，它使选择像可编辑一样。
回答by Version1
add:
添加：
overflow-y: scroll
in your css bud.
在你的 css 萌芽中。
