En el post anterior expliqué como aplicar estilo a los formulario.
Ahora voy a aplicar un estilo un poco más elaborado, mantenemos la misma estructura html pero ahora la hoja de estilos varía un poco
[cc lang=»css»]
#form {
width:450px;
margin:auto;
background-color:#84AA00;
border:none;
}
#form legend{
font-weight:bold;
font-size:12px;
color:#FFFFFF;
background-color:#000000;
padding:3px 8px 3px 8px;
}
#form ol{
list-style:none;
}
#form ol li{
padding-bottom:5px;
}
#form ol li label{
width:120px;
float:left;
text-align:left;
color:#FFFFFF;
}
#form input[type=text] {
border:none;
background-image:url(f1.jpg);
background-repeat:no-repeat;
background-color:#84AA00;
height:30px;
width:254px;
}
#form input.btn {
padding:3px;
color:#FFFFFF;
background-color:#576F00;
border:1px solid #000000;
}
[/cc]
Como verás además del estilo de siempre para quitar los numeros a la lista y alinear las etiquetas le he agregado un grafico de fondo a las cajas de texto para obtener un formulario má atractivo además de tener un fondo más llamativo
Otros post sobre maquetación CSS
- Maquetación a tres columnas
- Maquetación a dos columnas
- Tablas versus divs
- Menu css usando ul y li
- Aplicar estilos a formularios
Si te pareció interesante este post, no olvides darles una revisada a los GoogleAds
