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.
3 Commenti a “CSS Highlight Form field”
ciao Patrick, essendo il mio primo commento ti vorrei fare i complimenti per il vostro blog e per il layout, poi vorrei segnalarvi che non riesco ad associarmi al vostro feed..
Ciao. Grazie prima di tutto per i complimenti, sempre ben accetti; per il tuo problema, ora dovrebbe essere tutto ok. Attendo tue conferme.
il link ora è valido, infatti se lo apro con un browser funziona ma se lo apro con un client(tipo feedDemon) al momento dell’ iscrizione mi segnala: indirizzo non valido, farò altre prove e ti faccio sapere se è un problema solo mio.