Possiamo sfruttare la pseudo-classe :focus dei CSS per visualizzare messaggi dinamici quando un campo di un form riceve il focus. L'implementazione, al momento, non funziona su Internet Explorer 8, ma è senza dubbio interessante. Vediamola insieme.
Abbiamo un form con la seguente struttura ripetuta:
<label for="name">Nome</label>
<input type="text" name="name" id="name" />
<span class="info required">Campo richiesto</span>
Possiamo prima nascondere il messaggio e poi mostrarlo quando il campo riceve il focus. Ecco come:
#form ul li span.info {
float: left;
font-weight: bold;
text-transform: uppercase;
display: none;
}
.required {
color: #d34545;
}
.optional {
color: #393;
}
#form ul li input:focus + span {
display: block;
}
Come si può notare, abbiamo semplicemente combinato la pseudo-classe :focus con il selettore adiacente. Potete visionare l'esempio finale in questa pagina.