Decorar un campo select de formulario con 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>
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:
SELECT{ font-family: verdana; font-size: 10px; color: white; background-color:#666;}