1

Quiero añadir un scroll horizontal en un elemento select. El código que os muestro a continuación funciona adecuadamente en chrome, sin embargo no funciona en firefox ni ie.

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="estilo.css"> 
</head> 
    <body> 
        <select id="select" name="select" size ='3'>
          <option value="value1">LUNES</option> 
          <option value="value2">MARTES</option>
          <option value="value3">MIERCOLES</option>
        </select>
    </body> 
</html>

y el siguiente css:

.select{
     width: 100px; 
     overflow: auto;
     height: 70px; 
}

Si alguien conoce una solución común para todos los navegadores lo agradecería.

1
  • ¿Todos los navegadores? ¿Cuáles y qué versiones mínimas?
    – Shaz
    Commented el 13 oct. 2016 a las 20:39

2 respuestas 2

1

Deberias usar

#select{
     width: 100px; 
     overflow: auto;
     height: 70px; 
   }

El símbolo numeral (gato) indica que buscas el elemento que lleve select como valor de su atributo id

O en su defecto

select{
         width: 100px; 
         overflow: auto;
         height: 70px; 
       }

Sin punto eso indica que vas a afectar a todos los elementos select

0

Podrias solucionarlo con un contenedor con scroll horizontal como caja padre.

Codigo CSS

#select_list{
    width: 100px;
    overflow-x: hidden;
    overflow-y: auto;
}

Codigo HTML

<div id="select_list"> 
    <select id="select" name="select" size ='3'>
       <option value="value1">LUNES</option> 
       <option value="value2">MARTES</option>
       <option value="value3">MIERCOLES</option>
    </select>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.