Color
Color
Color
Color

Decorando el drop down menú

Por Federico Javier Elgarte. Webmaster de CSSboulevar





Recursosfree.com

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>

Ver ejemplo en marcha


013

3 comentarios

Por ernesto | macrocomm [@] hotmail.com
Necesito que el Drop-Down Menu al seleccionar la opcion me abra una nueva ventana por que solo e conseguido abrirla en la misma web.
Por Ismael | ixmael.arts [@] gmail.com
Hola:
Pues creo que le puedo responder a Ernesto (según yo), para el Drop-Down pones enlaces con la etiqueta en la etiqueta ademas de poner hacia donde es el enlace (href) debes poner target = \"_blank\", te abre la página del enlace en una nueva ventana.
Por Ariel | constenla-haile [@] speedy.com.ar
Alguien sabe cómo personalizar el color azul por defecto al posar el mouse.

Escribe un comentario sobre este artículo


    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/cssboule/public_html/articulos/index.php on line 175

    Warning: mysql_free_result(): supplied argument is not a valid MySQL result resource in /home/cssboule/public_html/articulos/index.php on line 181
    Script error: local_152429.xml does not exist. Please create a blank file named local_152429.xml.