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

Para darte una idea mejor de lo que busca este articulo por favor observa el resultado antes de seguir leyendo.

Primero

Creamos una página nueva HTML.

Segundo

Dentro de las etiquetas HEAD definimos el CSS.

<style type="text/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;
}
</style>

Tercero

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

<form method="post" action="">
<label for="color">Selecciona tu color favorito:</label>
<p>
<select name="color" id="color">
<option value="">Selecciona Uno</option>
<option value="amarillo" class="amarillo">amarillo</option>
<option value="rojo" class="rojo">rojo</option>
<option value="verde" class="verde">verde</option>
<option value="azul" class="azul">azul</option>
</select>
</p>
<p>
<input type="submit" name="submit" id="submit"
value="Enviar!" />
</p>
</form>

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.