En el post anterior expliqué como aplicar estilo a los formulario.
form-2
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#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;
}

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

Si te pareció interesante este post, no olvides darles una revisada a los GoogleAds