Como usar distintos colores en un select menu con CSS
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="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.
|
Artículos Relacionados Manual ASP. Borrar registros Borrado de un registro en ASP y SQL Otra de las operaciones elementales que se pueden... Manual ASP. Actualizar un registro existente Cómo actualizar un registro ya existente Para mostrar cómo se actualiza un registro presente en nuestra... Cómo incluir varios estilos en tu Blog usando PHP Para los usuarios de Movable Type, por favor lean cómo poner Etiquetas PHP en Movable... Manual JavaScript. Gestión de formularios Gestión de formularios de datos Una de las utilidades más interesantes de JavaScript es la posibilidad... |
(Sin valoración)
Loading ...Autor y licencia
Autor: Balú
URL: Baluart
1 Comentario para “Como usar distintos colores en un select menu con CSS”
RSS
Hola! soy Jeo locutor de xplosion radio la vdd siempre he tenido esta facinacion por aprender Diseño web y grafico la vdd me han servido mucho sus manuales igual hago un espacio ahi en la pagina para publicar su contenido y su pagina web si no les molesta.
29/08/09 - 18:47 #