始终在<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.我删除了heightCSS,因为它没有必要改变它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:2create 更大的选择框.如果小size,选择框将不显示滚动条,您必须检查适当的size数量.没有滚动条,如果单击滚动条的上下图标,它将工作.我显示两者在你的小提琴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>