Decorando el drop down menú en CSS

CSS ofrece infinitas opciones para decorar todos los elementos soportados por html. Esta vez mostraré como aplicar nuestro estilo personalizado a los drop down menú.

Primero definiremos el tag option, que contendrá el estilo de letra, el tamaño, el color, etc...
option {font-family: verdana; font-size: 10px; color: white}

Luego definiremos dos estilos vinculados a option que contendrán los colores de fondo de cada opción:
option.uno {background-color: #CCC}
option.dos {background-color: #666}

El último paso es colocar el drop down menú con nuestro estilo personalizado:
<select>
<option class="uno">Opción</option>
<option class="dos">Opción</option>
<option class="uno">Opción</option>
<option class="dos">Opción</option>
<option class="uno">Opción</option>
<option class="dos">Opción</option>
</select>

Autor: Federico Javier Elgarte
http://www.cssboulevar.com.ar/leer.php/articulo/13

Usuarios que han visto este tema también han visto...

- Normas básicas de CSS
- Maquetar una página con CSS
- 10 errores comunes en CSS
- Texto 3D con CSS
- Evitar que una página se imprima en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento