Ocultar la barra de desplazamiento vertical en el elemento

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

   

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?

Aquí es donde apreciamos todo el poder de CSS3

   

Violín

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.

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

Puede usar un

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

encima.

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; } 
  

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;} 
  

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

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

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; } 
 

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

Pero puedes intentar agregar un atributo de “tamaño”.