Como Usar Diferentes Colores en un Select utilizando Css
En ocasiones cuando estamos diseñando una página web y queremos dar la opción de que cambie "X" elemento de nuestro diseño podemos poner un select común que solo contenga el nobre del color, pero porque no hacerlo dandole fondo a cada elemento del select?, esto es muy sencillo utilizando Css.
Código CSS:
CSS:
-
body{
-
background-color:#666666;
-
color:#FFFFFF;
-
text-align:center;
-
}
-
/*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;
-
}
Código HTML:
HTML:
-
<form method="post" action="">
-
<label for="color">Selecciona tu color favorito:</label>
-
<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>
-
<input type="submit" name="submit" id="submit"
-
value="Enviar!" />
-
</p>
-
</form>
Vota esta entrada:
