Como usar distintos colores en un select menu con CSS?

baluart27 Mayo 2005 - 12:00am 2 comentarios
Enviar por Email Imprimir

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.

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.

Comentarios

Imagen de andre

Este menu esta bueno de hecho yo lo utilizo en mi sitio web, pero ¿es posible crear una paleta de colores algo asi como en los programas con javascript? Formulario donde pase los datos al archivo PHP para su proseso. 

Imagen de probando
probando

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más