Formularis amb CSS (3).

En aquesta entrada donarem format a un formulari però els camps els organitzarem mitjançant les etiquetes <ul> i <li>

Suposem que tenim un formulari amb 4 camps:

Modifiquem el h2

.contacte h2 {
    background: none repeat scroll 0 0 #B5B2B2;
    border-radius: 5px;
    color: #5CD053;
    display: block;
    font-family: sans-serif;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 1px #CCCCCC;
    width: 433px;
}

Ara treiem la vinyeta dels camps

.contacte ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contacte li{
    padding:12px; 
    border-bottom:1px solid #eee;
    position:relative;
}

Ara millorarem l'aspecte dels camps:

.contacte label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contacte input {
    height:20px; 
    width:220px; 
    padding:5px 8px;
}
.contacte textarea {padding:8px; width:300px;}
.contacte input[type=submit] {margin-left:156px;height:30px; 
    width:220px;}

Ara modificarem el comportament del camp quan posem el ratolí:

Amb la línia   el que fem es netejar que el focus no funcioni, ja que per cada navegador funciona diferent ( seria com inicialitzar-lo)
 

*:focus {outline: none;}

*:focus {outline: none;}
    
    .contacte input:focus, .contacte textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
} 

Ara millorem el botó:

input[type=submit] {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
input[type=submit]:hover {
    opacity:.85;
    cursor: pointer; 
}
input[type=submit]:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
     
}

Ara fem que els camps obligatoris tinguin un asterisc, fet amb una imatge ( la imatge ha de fer 16 px * 16px)

input:required, textarea:required {
    background: #fff url(asterisco.jpg) no-repeat 98% center;
} 

 

Ara farem que els camps es mostrin diferents, segons si són vàlids o invàlids ( segons el navegador)

.contacte input:focus:invalid, .contacte textarea:focus:invalid {
    background: #fff url(novalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

.contacte input:required:valid, .contacte textarea:required:valid { 
    background: #fff url(valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}