Como usar distintos colores en un select menu con CSS

por | 25 octubre 2008
Podemos personalizar nuestros select menu asignádoles clases a las opciones del menú, como prueba añadiremos distintos colores de fondo en el desplegable. 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. Fuente: El Gurú Programador
Compartir... Email this to someoneShare on LinkedIn0Pin on Pinterest0Share on StumbleUpon0Share on Tumblr0Tweet about this on Twitter