Buscar Más buscado

Diseñando Formularios con CSS - Un poco de CSS

4 - Un poco de CSS

Artículo creado por Balú. Extraido de: http://www.baluart.net/articulo/47/disenando-formularios-con-css-i-parte.php
11 de Agosto de 2006
< anterior | 1 ... 2 3 4

Dentro de las etiquetas head, colocamos lo siguiente:

<style type="text/css">
#registro {width:360px; padding:10px; margin:15px; border: 2px dashed #D7AAEC;background-color:#D7AAEC;}
#registro fieldset {border:0;background-color: #E4C6F2; padding:10px 20px;}
#registro legend{font: bold 16px Arial, sans-serif;color:#9C2DD2; padding:0 5px;}
#registro p label {font:bold 12px Geneva, Arial, Helvetica, sans-serif; float: left;width: 22%; text-align:right;padding:5px; color: #000000;}
#registro p br {clear: left;}
.enviar{margin:3px 0 0 83px;}
</style>

Fíjate que primero formateamos la capa registro, definimos el ancho, margen, borde y color de fondo. Luego el fieldset, legend y label de igual manera. Pero nota que para lograr este diseño, es importante colocar todo dentro de un párrafo y hacer un salto de carro con la etiqueta BR, sin embargo el float: left que aplicamos al label se repetiría, por lo que tenemos que limpiar el float después de cada salto.

Con esto ya tenemos un bonito, llamativo y bien estructurado formulario de registro.

< anterior | 1 ... 2 3 4

Opinar
1 opinión

hola

hola

Artículos relacionados con 'Diseñando Formularios con CSS'

Diseñando Formularios con CSS
En este artículo, veremos la variedad de caminos con los cuales podemos hacer formularios atractivos... Más »

Anuncios Google

Autor y licencia de 'Diseñando Formularios con CSS'

Esta obra está bajo una licencia de Creative Commons
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.