Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Diseño web | Promoción web | Ganar dinero
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Decorar un campo select de formulario con CSS


Ejemplo de un código para decorar un campo select de un formulario, utilizando hojas de estilos en cascada.


06/7/05 - 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;}

Podemos ver el ejemplo en marcha.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 2 comentarios (Añadir)
+ 1 comentario no revisado

 Autoría, licencia y acciones sobre este artículo

Informe de Federico Elgarte*
URL: http://www.cssboulevar.com.ar/

Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Taller de CSS

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en CSS


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestran 2 comentarios revisados

 Comentario de sergio
07/7/06 
Esta bien, pero lo que estaria muy bien es poder variar el hancho del borde su color y el color de la flechita.
Si alguien sabe como que lo explique por favor

 Comentario de jesus r
31/8/07 
segun veo yo, con el select no se puede hacer mucho. por ejemplo, para cambiar el color del borde, o cambiar la alineacion de las opciones...

Añadir un comentario al artículo Añadir un comentario del artículo
 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se ha encontrado un comentario sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Taller de CSS
Categorías
+CSS

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia