Como usar distintos colores en un select menu con CSS?

En una pequeña búsqueda (google y  yahoo) de personalizar los select menú con CSS, no encontré nada de información al respecto. En este pequeño artículo vemos como utilizar CSS para combinar colores en nuestros select menú de una manera muy fácil y sencilla. Si deseas ver un ejemplo, pulsa aquí...

Podemos personalizar nuestros select menu asignádoles clases a las opciones del menú, como prueba añadiremos distintos colores de fondo en el desplegable. Observa el resultado.

Primero: Creamos una página nueva HTML.

Segundo: Dentro de las etiquetas style del Head HTML definimos el CSS.

body{
background-color:#666666;
color:#FFFFFF;
text-align:center;
}
/*Recuerda: para definir las clases se coloca un punto delante del nombre*/
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}

Tercero: Dentro del Body, creamos nuestro formulario, asignando a cada option la clase que le corresponda.

Selecciona tu color favorito:


Selecciona Uno
amarillo
rojo
verde
azul

Cuarto: Guardar y Probar.

Este mismo procedimiento, es suficiente para añadir imágenes en cada option, sólo modificando las clases CSS, de tal manera de poder dejar muy bien personalizado nuestro menú de selección.