Manual de CSS

 
 
 

Mapa Web

 
borde   borde
Portada arrow Lista de Códigos CSS arrow Decorar un campo select de formulario con CSS

 

Decorar un campo select de formulario con CSS Imprimir E-mail
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>

Aparte de asignar estilos a los option, también se deben definir los estilos del campo select en se. será necesario hacerlo así, por lo menos, para el navegador Firefox y otros de la familia de Mozilla.

Para definir el estilo del campo select utilizaremos este código CSS:

SELECT{ font-family: verdana; font-size: 10px; color: white; background-color:#666;}

Autor: Federico Elgarte
http://www.cssboulevar.com.ar/

 

 
Portada
Capítulos del Manual de CSS
Introducción a CSS
El Tag LINK
El Tag STYLE y la directiva @import
Comentarios CSS y Reglas Básicas
Agrupación de Selectores y Declaraciones
El Atributo Class y el Atributo ID
Pseudo-clases y Pseudo-elementos
Estructura y Herencia
Especificidad y Estilos en Cascada
Clasificación de los elementos y Colores
Unidades
Identación
Alineación
Espacios en Blanco
Anchura de Líneas
Alineación Vertical
Espacio entre Palabras y entre Letras
Transformación del Texto
Decoración del Texto
Practicar en línea
Lista de prácticas en línea
FAQ
Preguntas frecuentes
Códigos CSS
Lista de Códigos CSS
Foros
Foros CSS
Otros Manuales
Manuales de otros lenguajes
 
   
 
 
Alojamiento web en Hostalia