始终在< select>中显示垂直滚动条 [英] Always show vertical scrollbar in <select>

问题描述

以下代码生成一个带有2个选项的列表框：

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

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

解决方案

它将在IE7中工作。但是在这里你需要修改 size 小于选项的数量，而不是使用 overflow -y：scroll 。在您的示例中，您有2 选项，但是您设置 size = 10 ，这将不起作用。

假设您的select有10个选项，然后固定 size = 9 。 / p>

这里，在您的代码引用中，您使用 height：100px code>。我删除 height css，因为它不是必需的，并改变了 size：5 ，它工作正常。 >

这是您从jsfiddle修改的代码：

 < select size = 5style =width：100px;> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< option> 4< / option> 
< option> 5< / option> 
< option> 6< / option> 
< / select> 
  

这将产生一个比大小更大的选择框： create.In小 size 的情况下，选择框不会显示滚动条，你必须检查适当的 size size：2 和 size 大于 2 （例如：3,5）。

> 这是您想要的结果。我认为这样会帮助您：

  .wrapper {
 border：1px broken 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 =15class =selection> 
< option>项目1< / option> 
< option>项目2< / option> 
< option>项目3< / option> 
< / select> 
< / div> 
  

The following code produces a listbox with 2 options:

<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.

解决方案

It will work in IE7. But here you need to fixed the size less than the number of option and not use overflow-y:scroll. In your example you have 2 option but you set size=10, which will not work.

Suppose your select has 10 option, then fixed size=9.

Here, in your code reference you used height:100px with size:2. I remove the height css, because its not necessary and change the size:5 and it works fine.

Here is your modified code from 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:2 create.In case of small size the select box will not display the scrollbar,you have to check with appropriate size quantity.Without scrollbar it will work if click on the upper and lower icons of scrollbar.I show both example in your fiddle with size:2 and size greater than 2(e.g: 3,5).

Here is your desired result. I think this will help you:

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>

这篇关于始终在< select>中显示垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！