Bienvenido a Tecnohackers

Tecnohackers » Programacion » Programacion Webmaster (Moderador: Zentraedi)
 » 

Como usar distintos colores en un select menu con CSS



Autor Tema: Como usar distintos colores en un select menu con CSS  (Leído 717 veces)

alma_triste

  • Visitante
Como usar distintos colores en un select menu con CSS
« en: Agosto 21, 2009, 03:46:37 pm »
Como usar distintos colores en un select menu con CSS
 
Podemos personalizar nuestros select menu asignádoles clases a las opciones del menu.
Como prueba añadiremos distintos colores de fondo en el desplegable.
Primero: Creamos una pagina nueva HTML.
Segundo: Dentro de las etiquetas HEAD definimos el CSS.
 
Código: You are not allowed to view links. Register or Login
<style type="text/css">
body{
background-color:#666666;
color:#FFFFFF;
text-align:center;
}
/*Recuerda: para definir las clasesse
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.
 
Código: You are not allowed to view links. Register or Login
<form method="post" action="PAGINA.HTML">
 <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.
« Última modificación: Abril 26, 2010, 12:30:40 am por dyb »

Tags:
Tags:

 


SMF 2.0.11 | SMF © 2015, Simple Machines
Paginas Afiliadas
Twitter - FaceBook - Daraxblog
Designed by Smf Personal