In questo breve tutorial vediamo come evidenziare i campi di testo e la nostra textarea in un Form. Come vedremo nel codice CSS, non faremo altro che assegnare dei parametri differenti ai valori a:hover e a:focus dei campi. Il codice:

form{
padding:0;
margin:0;}

fieldset{
border:none;}

label{
color:#B4AF91;
font-weight:bold;
line-height:175%;}

input, textarea{
color:#2a2a2a;
font-size:11px;
background:#FCFAE1;
width:70%;
border:1px solid #F6E497;
padding:4px;
margin:5px 0;}

input:hover, textarea:hover{
color:#2a2a2a;
background:#fff;
border:1px solid #F6E497;}

input:focus, textarea:focus{
color:#2a2a2a;
background:#fff;
border:1px solid #F6E497;}

Chiaramente le varianti sono infinite, come ad esempio aggiungere delle immagini di sfondo ai campi nel caso dell’Hover. Buon divertimento.