Mostrar siempre la barra de desplazamiento vertical en <select>

Question

El siguiente código produce un cuadro de lista con 2 opciones:

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

¿Es posible mostrar siempre una barra de desplazamiento vertical en este cuadro de lista? Estoy haciendo esta pregunta porque style = "overflow-y: scroll;" no funciona aquí en IE7.

Answer 1

Funcionará en IE7. Pero aquí debe arreglar el size menor que el número de option y no usar overflow-y:scroll. En su ejemplo tiene 2 option pero establece size=10, que no funcionará.

Supongamos que su selección tiene 10 option, luego se corrigió size=9.

Aquí, en su referencia de código, utilizó height:100px con size:2. Elimino el height css, porque no es necesario y cambio el size:5 y funciona bien.

Aquí es su código modificado de 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> 

Esto generará un cuadro de selección más grande que size:2 caso create.In de pequeña size el cuadro de selección no se mostrará la barra de desplazamiento, usted tiene que consultar con su caso size quantity.Without scrollbar funcionará si hace clic en los iconos superior e inferior de la barra de desplazamiento. Muestro ambos ejemplos en su violín con size:2 y size mayor que 2 (por ej .: 3,5).

Aquí está el resultado deseado. Creo que esto le ayudará a:

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> 

Answer 2

complemento:

overflow-y: scroll 

en su capullo css.

Answer 3

supongo que no puedes, esto tal vez una limitación o no incluido en el navegador Internet Explorer. He probado su jsfiddle con IE6-8 y no muestra la barra de desplazamiento y no estoy seguro con IE9. Mientras está en FF y Chrome, se muestra la barra de desplazamiento. También quiero ver cómo hacerlo en IE si es posible.

Si realmente desea mostrar la barra de desplazamiento, puede agregar una barra de desplazamiento falsa. Si está familiarizado con la biblioteca js que se usa en RIA. Al igual que en jquery/dojo, algunos de los seleccionados son editables, porque es una combinación de cuadro de texto + seleccionar o también puede ser un cuadro de texto + div.

Como ejemplo, verlo here un JavaScript que hace que seleccione como editable.