html - que - Ocultar la barra de desplazamiento vertical en el elemento<select>

ocultar scroll pero que funcione

Question

Hola, tengo una casilla de selección con varias opciones y necesito ocultar la barra de desplazamiento vertical, ¿es posible?

<select name="sCat" multiple="true">
<!-- My Option Here -->
</select>

Okey, pero ¿cómo puedo lograr un efecto en el que pueda seleccionar un elemento de la lista que tenga ID y luego usar jQuery para administrar estas funciones id.click? ¿Qué elemento debería usar entonces?

Answer 1

Al igual que Guffa, dijo, no se puede obtener de manera confiable tanto control sobre los controles nativos. La mejor forma es, probablemente, crear una caja de elementos con botones de opción al lado de cada elemento, luego usar etiquetas y JavaScript para hacer que las ''filas'' sean interactivas, por lo que al hacer clic en un botón de radio o etiqueta se coloreará la fila seleccionada.

Answer 2

Aquí es donde apreciamos todo el poder de CSS3

<style>
.bloc { display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; }
.bloc select { padding:10px; margin:-5px -20px -5px -5px; }
</style>
<!-- Années -->
<div class="bloc">
<select name="year" size="5">
<option value="2010" >2010</option>
<option value="2011" >2011</option>
<option value="2012" SELECTED>2012</option>
<option value="2013" >2013</option>
<option value="2014" >2014</option>
</select>
</div>

Violín

Answer 3

Cambiar el relleno de fondo, es decir, puede ser la forma más simple posible.

Answer 4

Creo que no puedes. El elemento SELECT se representa en un punto fuera del alcance de CSS y HTML. ¿Está atenuado?

Pero puedes intentar agregar un atributo de "tamaño".

Answer 5

Desarrollé la solución de Arraxas para:

• expanda el cuadro para incluir todos los elementos

• cambiar el fondo y el color en el vuelo estacionario

• obtener y alertar valor al hacer clic

• no seguir resaltando la selección después de hacer clic

let selElem=document.getElementById(''myselect'').children[0];
selElem.size=selElem.length;
selElem.value=-1;
selElem.addEventListener(''change'', e => {
alert(e.target.value);
e.target.value=-1;
});

#myselect {
display:inline-block; overflow:hidden; border:solid black 1px;
}
#myselect > select {
padding:10px; margin:-5px -20px -5px -5px;";
}
#myselect > select > option:hover {
box-shadow: 0 0 10px 100px #4A8CF7 inset; color: white;
}

<div id="myselect">
<select>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>

Answer 6

No, no puedes controlar el aspecto de un cuadro de selección con tanto detalle.

Un cuadro de selección generalmente se muestra como una lista desplegable, pero no hay nada que diga que siempre se debe mostrar de esa manera. La forma en que se muestra depende del sistema, y ​​en algunos teléfonos móviles, por ejemplo, no se obtiene un menú desplegable, sino un selector que cubre la mayor parte o la totalidad de la pantalla.

Si desea controlar cómo se ven los elementos del formulario con tanto detalle, debe crear sus propios controles de formulario a partir de los elementos HTML habituales (o buscar a alguien más que ya lo haya hecho).

Answer 7

Puede usar un <div> para cubrir la barra de desplazamiento si realmente desea que desaparezca.
Aunque no funcionará en IE6, los navegadores modernos te permiten poner un <div> encima.

Answer 8

Sé que este hilo es algo antiguo, pero hay muchas respuestas realmente hacky aquí, así que me gustaría ofrecer algo que sea mucho más simple y mucho más limpio:

select {
overflow-y: auto;
}

Como puede ver en este violín , esta solución le proporciona flexibilidad si no sabe la cantidad exacta de opciones de selección que va a tener. Oculta la barra de desplazamiento en el caso de que no la necesite sin ocultar posibles elementos de opciones adicionales en el otro caso. No hagas todo esto hacky superpuesto div . Solo hace un marcado ilegible.

Answer 9

el fragmento .no-scroll de mi navegador cruzado:

.no-scroll::-webkit-scrollbar {display:none;}
.no-scroll::-moz-scrollbar {display:none;}
.no-scroll::-o-scrollbar {display:none;}
.no-scroll::-google-ms-scrollbar {display:none;}
.no-scroll::-khtml-scrollbar {display:none;}

<select class="no-scroll" multiple="true">
<option value="2010" >2010</option>
<option value="2011" >2011</option>
<option value="2012" SELECTED>2012</option>
<option value="2013" >2013</option>
<option value="2014" >2014</option>
</select>

Answer 10

Chrome (y tal vez otros navegadores webkit) solamente:

/* you probably want to specify the size if you''re going to disable the scrollbar */
select[size]::-webkit-scrollbar {
display: none;
}

<select size=4>
<option>Mango</option>
<option>Peach</option>
<option>Orange</option>
<option>Banana</option>
</select>