Menu de select con distinto ancho

FantasmaFito · #1 (**permalink**) 04/09/2009, 14:54

Hola, tengo un select con un ancho determinado. Lo que necesito es que el menú desplegable de ese select tenga más ancho. No se si me explico, sería algo así:

El menú que se desplega es más grande que el campo select donde uno hace click.
Firefox me lo genera automaticamente pero explorer no lo hace.

¿Alguien tiene idea de como se puede solucionar?

Muchas gracias!

Raulmmmm · #2 (**permalink**) 05/09/2009, 00:54

Pues yo lo que haría es simplemente ponerle el atributo style="width: 200px" al select y cambiarle el número hasta que te quede ajustado.

Pruébalo y nos cuentas

.

FantasmaFito · #3 (**permalink**) 05/09/2009, 08:20

Claro, pero eso me cambia todo, el select y el menu. Yo quiero que el botón del select quede con un ancho fijo y el menu que sea más grande que ese ancho.

kseso? · #4 (**permalink**) 05/09/2009, 09:53

Prueba lo siguiente:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
#seleccion {
margin: 15px 50px;
}
#clientes {
Font-family: verdana;
font-size:1em;
width: 8em;
background: #FF6600;
color: #ffc;
}
option {
font-size: 1em;
font-family: monospace;
background: #CCCC00;
color: #600;
width: 15em!
</style>
</head>
<body> 
<div id="seleccion">              
                  <select id="clientes" name="clientes" >
                  <option selected="selected">&darr;Clientes...</option>
                  <option value="">&nbsp;</option>
 
                  <option value='#'>&rarr; El Banco del Parque</option>
                    <option value='#'>&rarr; El Parque del Banco</option>
                    <option value='#'>&rarr; El Fondo de la Botella</option>
                    
                    <option value='#'>&rarr; La Botella del Fondo</option>
                    <option value='#'>&rarr; I-tunes del Regato</option>
                    <option value='#'>&rarr; Perro Flaco</option>
                    
                    <option value='#'>&rarr; Orejas al Viento</option>                
                    <option value='#'>&rarr; Valjarinas</option>
                    <option value='#'>&rarr; Los Chirrinchales</option>
                    
                    <option value='#'>&rarr; Barrocal Gordo</option>
                    <option value='#'>&rarr; El Punt&oacute;n</option>
                    <option value='#'>&rarr; La Palomba</option>
                    
                    <option value='#'>&rarr; La Palombina</option>                                      
                    <option value='#'>&rarr; &laquo;&laquo;&laquo;&raquo;&raquo;&raquo; &larr;</option>
                      </select>
</div>
</body>
</html>

En FF 3.5

pero en ie7

corta las opciones.
No lo probé en más.

alexk · #5 (**permalink**) 05/09/2009, 11:18

mi se me ocurre usar divs y jquery... para dar el efecto de "<select>" se dice facil pero da pereza... jeje... ya que siempre te va a cortar con IE si usas select... ya que este elemento cambia segun el explorador-S/O y no es muy flexible con el CSS...
eh visto algo parecido en "megaupload.com" pero usa tablas :S mira en donde se cambia el idioma nose si te sirva chao y suerte!:..