Select con imágenes de fondo

Uno de los controles más utilizados a nivel web son los selects o también llamados combos. Se usan constantemente en formularios (para que los usuarios introduzcan sus datos), en listados (para determinar que filtro lequeremos aplicar al listado), etc… De hecho este control nos permite dar opciones a los usuarios de interactuar con la página Web, pero  a la vez al ofrecer opciones acotadas al usuario para escoger, es una manera mucho mas segura (en el sentido de evitar errores en la web, o evitar injección de codigo sql) de lo que lo es un campo de texto.

En esta ocasión cito a las combos para comentar como se puede hacer para que estas tengan un estilo más elegante o más visual o más intuitivo con las opciones que ofrece a los usuarios de la aplicación. A parte de ver la apliación de estilos a un select, la idea es la de introducir imágenes a cada uno de los elementos que podremos seleccionar.

En primer lugar vamos a definir una combo con 4 opciones distintas, a cada una de las opciones vamos a asignarle un identificador para poder asociarle estilos distintos a cada una de ellas.

<select name=”prueba” style=”width:150px;” >
<option id=”opcion1″>Opción 1</option>
<option id=”opcion2″>Opción 2</option>
<option id=”opcion3″>Opción 3</option>
<option id=”opcion4″>Opción 4</option>
</select>

Una vez ya tenemos el select definido con las 4 opciones distintas y los identificadores asociados a cada una de ellas, ya podemos pasar a tratar los estilos que darán un toque especial a este habitual control. Vamos a poner una posible hoja de estilos para este select, y a continuación, comentaremos lo que se está tratando.

<style type=”text/css”>
SELECT{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:1px solid #666666;

}
#opcion1 {
background-image: url(/styles/imgs/checked.gif);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion2 {
background-image: url(/styles/imgs/calendar.png);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion3 {
background-image: url(/styles/imgs/page_go.png);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;

}
#opcion4 {
background-image: url(/styles/imgs/anterior.gif);
background-repeat:no-repeat;
padding-left:25px;
margin-bottom:2px;
}
</style>

En primer lugar le damos estilo a toda la combo con la etiqueta SELECT que hace referencia al tag en cuestión. Simplemente le asignamos un estilo de fuente, tamaño y un borde de 1píxel de un color concreto, que aunque no lo parezca dará una toque elegante al elemento. A continuación tenemos los estilos asociados a cada una de las opciones. De hecho son todos iguales, lo único que varia son las rutas de las imágenes de fondo que se usarán para cada una. Designamos que esta imagen no se repita para que no se confunda con el texto de la opción (ya que en este caso combinaremos texto e imagen).  El padding-left se usa para que el texto de la opción empiece justo después de la imagen evitando solapaciones. Finalmente tenemos un margin bottom de 2 píxels que simplemente lo usamos para que haya una mínima separación vertical entre opciones. Finalmente mostraremos una posible imagen final de lo que podria ser este select.

8 Comentarios en “Select con imágenes de fondo”

Nicolas Rios dice:

Hola, me ha servido de maravilla este codigo, pero ocurre que sobre IE no funciona. como hago?
rios.nicolas@gmail.com

Gracias

Trenero dice:

¿Con cuál versión del IE no te funciona?

Benito dice:

Con IE6 no funciona.

V.Mask dice:

Probad con el jDrop http://doctorfilter.com/jDrop/ de jQuery…

Benito dice:

El Jdrop está en alfa y falla mucho. Por ejemplo cuando hay un select al que no quieres aplicarlo, aunque hay un parche para corregirlo. Y cuando hay muchos selects no funciona bien.

V.Mask dice:

Hola de nuevo, Benito, tienes razón no es lo mejor del mundo, pero menos da una piedra.

Un saludo

Stephanie dice:

Muchisimas gracias era exacto lo que buscaba

Dejar un comentario

*