1. Inicio
  2. Pregunta y respuesta
  3. Ocultando la barra de desplazamiento vertical de varias líneas SELECT en Firefox y Chrome?

Ocultando la barra de desplazamiento vertical de varias líneas SELECT en Firefox y Chrome?

2010-07-04 17 views
8

Este problema parecía bastante simple (overflow:hidden, ¿verdad?) Hasta que no pude resolverlo. Tengo un simple multi-línea SELECT con tamaño definido:Ocultando la barra de desplazamiento vertical de varias líneas SELECT en Firefox y Chrome?

<select size="10" name="elements"> 
... 
</select>

MSIE y Opera mostrar barra de desplazamiento vertical sólo cuando sea necesario, pero Firefox y Chrome siempre pantalla barra de desplazamiento vertical en el estado desactivado.

Intenté configurar el desbordamiento, overflow-y, e incluso overflow-x, pero nada funciona. ¿Algunas ideas?

Fuente

2010-07-04 Sergei

Respuesta

-1

La única cosa que puedo pensar es para solapar la barra de desplazamiento mediante la colocación de una imagen o sólido DIV con un alto índice z justo encima del SELECT barra de desplazamiento. Pero esto sería un hack feo.

Fuente

2010-07-04 03:33:01

1

Prueba esto:

<html> 
<head> 
<style> 
div.border { 
    margin-right: 0px; 
    border-style:solid; 
     overflow:hidden; 
} 
select.hiddenscroll { 
    margin-right: -20px; 
    margin-top: -3px; 
    margin-bottom: -3px; 
    padding-right: -20px; 
     overflow:hidden; 
} 
</style> 
</head> 
<body> 
    <table> 
    <tr><td> 
    <div class="border" style="overflow:hidden;"> 
     <select size="5" multiple="multiple" class="hiddenscroll" scrolling="no" seamless="seamless"> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      <option>Option 4</option> 
      <option>Option 5</option> 
     </select> 
    </div> 
    <table> 
    </tr></td> 
</body> 
</html>

Fuente

2012-05-23 16:56:35

+0

Una breve descripción de la solución al problema de OP sería mejor. Por favor, lea: http://stackoverflow.com/questions/how-to-withour – askmish

7 
<div style="overflow: hidden;"> 
<select style="width: 110% ; border: 0px;"> 
.....

Fuente

2013-04-14 08:25:03 mon

5

Es un tema bastante viejo ahora, pero me imagino que hay otros que se topan con él en busca de una respuesta a la misma pregunta al igual que yo. Para los navegadores Webkit hay una solución muy simple gracias al hecho de que (Chrome y Safari) permiten diseñar la barra de desplazamiento.

Aquí hay una referencia decente a muchas de las cosas que puede hacer con webkit scrollbars. El CSS que necesita aquí es

select::-webkit-scrollbar{width:1px;background-color:transparent}

El truco está haciendo esencialmente dos cosas

  1. Hacer la barra de desplazamiento sólo un píxel de ancho por lo que no se interpone en el camino
  2. establecer su color de fondo para transprent

Si quieres que esto funcione para sólo un subconjunto de seleccionar las barras de desplazamiento se debe cambiar el CSS mediante la alteración de la barra de desplazamiento para una clase ficticia

.subsel::-webkit-scrollbar{width:1px;background-color:transparent}

y luego use esa clase para las selecciones que desea modificar. p.ej.

<select class='subsel' id='selOne' size='4'> 
<option value='1'>Option One</option> 
<option value='2'>Option Two</option> 
</select>

Aquí es un violín que muestra la barra de desplazamiento "eliminado" en acción

rememebr it will only work with Webkit browsers!

Fuente

2013-06-23 05:55:37 DroidOS

Cuestiones relacionadas

 Cuestiones relacionadas