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:

Contenido Oculto, debes registrarte para poder ver lo que hay dentro :)


Luego definiremos dos estilos vinculados a option que contendrán los colores de fondo de cada opción:

Contenido Oculto, debes registrarte para poder ver lo que hay dentro :)


El último paso es colocar el drop down menú con nuestro estilo personalizado:

Contenido Oculto, debes registrarte para poder ver lo que hay dentro :)


Aparte de asignar estilos a los option, también se deben definir los estilos del campo select en se. será necesario hacerlo así, por lo menos, para el navegador Firefox y otros de la familia de Mozilla.

Para definir el estilo del campo select utilizaremos este código CSS:

Contenido Oculto, debes registrarte para poder ver lo que hay dentro :)