html - 始终在 <select> 中显示垂直滚动条

Question

以下代码生成一个包含 2 个选项的列表框:

<select size="10">
 <option>1</option>
 <option>2</option>
</select>

是否可以在这个列表框中始终显示垂直滚动条？ 我问这个问题是因为 style="overflow-y: scroll;"在 IE7 中不起作用。

Answer 1

它将在 IE7 中工作。但是这里需要固定size小于option的个数，并且不使用overflow-y:scroll。在您的示例中，您有 2 个 option，但您设置了 size=10，这将不起作用。

假设您的选择有 10 个 option，然后固定为 size=9。

在这里，在您的代码引用中，您使用了 height:100px 和 size:2。我删除了 height CSS，因为它不是必需的，并且更改了 size:5 并且它工作正常。

这是您从 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>

这将生成一个比 size:2 创建的选择框更大的选择框。如果 size 较小，选择框将不会显示滚动条，您必须检查适当的size 数量。没有滚动条，如果单击滚动条的上下图标，它将起作用。我在你的 fiddle 中用 size:2 和 size< 显示了这两个示例 大于 2(例如:3,5)。

这是您想要的结果。我认为这会对您有所帮助:

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

<div class="wrapper">
<select size="15" class="selection">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>
</div>