Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera.
In questo post vedremo come evidenziare il campo di testo selezionato dall’utente, in modo da aiutarlo a non perdere di vista il punto di lettura della pagina, e vedremo come diversificare lo stile di due textarea senza ricorrere alle classi (risparmiando in termini di peso della pagina e mantenendo più pulito il codice).
Infine vedremo come realizzare lo stesso con jQuery, un framework di javascript.

Le casistiche
⤽
Efetti highlight
⤽
Creiamo una nuova pagina HTML e inseriamo un

per contenere alcuni campi all’interno di un <div>, poi utilizzeremo nel foglio di stile la pseudo-classe :focus, presente nelle specifiche CSS 2.1, per determinare la resa visiva nel momento in cui il campo viene selezionato:
Copia codice 

<!-- inserire nell'HTML -->
<form>
  <div id="contenitore">
    <h5>Semplice esempio di blocco. </h5>
    <label for="nome">Esempio di Text Box: </label><br />
    <input type="text" name="nome" id="nome" /> <br />
    <label for="messaggio">Esempio di Text AREA : </label> <br />
    <textarea id="messaggio" name="messaggio" rows="5" cols="30"></textarea>
  </div>
</form>
L’identificativo del contenitore si rende utile se si vuole l’effetto grafico su un particolare form anziché gli eventuali altri form presenti nella pagina come in questo caso; se anteponiamo l’ID al selettore specificheremo solo questo.
Copia codice 

/* inserire nel CSS */
#contenitore label {width: 175px;}
#contenitore textarea, #contenitore input {
   background:#e0eee0;
   color:#666;
   border:1px solid #999;
   width: 175px;
}
#contenitore input:focus, #contenitore textarea:focus {
   border:1px solid #3C3;
   background:#D9FFFF;
}
Semplice esempio di blocco.




Disabilitare i campi
⤽
Con le pseudo-classi :enabled e :disabled invece si può , come accennato prima, gestire il comportamento degli elementi abilitati al riempimento o meno. L’esempio non funzionerà su IE8 e precedenti.

Come esempio, poniamo il caso di avere un form con due campi textarea, uno per l’invio del messaggio ed un’altro che contiene il testo della policy. Per differenziarli utilizzeremo le pseudo-classi invece di attribuire ad esse due classi distinte:

Copia codice 

<!-- inserire nell'HTML -->
<form>
  <div id="contenitore2">
    <h4>Semplice esempio di blocco. </h4>
    <label for="messaggio">Esempio di Text AREA : </label> <br />
    <textarea id="messaggio" name="messaggio"></textarea>
    <label for="privacy">Esempio di Text AREA : </label> <br />
    <textarea id="privacy" name="privacy" disabled="disabled">
    Testo Privacy ...
    </textarea>
  </div>
</form>
Nel foglio di stile possiamo tenere le regole di prima e aggiungere una nuova.
Copia codice 

/* inserire nel CSS */
#contenitore2 label {width: 175px;}
#contenitore2 textarea, #contenitore2 input {
   background:#e0eee0;
   color:#666;
   border:1px solid #999;
   width: 175px;
}
#contenitore2 input:focus, #contenitore2 textarea:focus {
   border:1px solid #3C3;
   background:#D9FFFF;
}
#contenitore2 textarea:disabled, #contenitore2 input:disabled {
   background:#D9FFFF;
   color:#666;
   border:1px solid #999;
}

Semplice esempio di blocco.




Esempio con jQuery
⤽
La resa grafica dell’interazione fra l’utente di un sito ed un form è stata quasi sempre ad appannaggio dello Javascript, grazie alla sua capacità di alterare in tempo reale le proprietà di un elemento. Un modo semplice, per chi non ha tanta dimestichezza nell’uso dei selettori con questo linguaggio, possiamo implementare, con poche righe di codice, questo evento con jQuery per abilitare o meno un campo a seconda delle nostre esigenze e, di conseguenza, modificarne l’apparenza.
Se prendiamo il primo esempio e inseriamo una casella di accettazione della privacy, potremmo abilitare un campo tutti i campi input (come nel seguente esempio live) solo se la casella venisse spuntata[vedere il tab HTML], aggiungeremo anche il pulsante per l’invio di dati.
Il foglio di stile rimane come quello di sopra, cambiando solo il nome dell’ID [vedere il tab CSS].
Invece, per quanto riguarda il codice javascript creeremo una funzione chiamandola toggleStatus che si occuperà di controllare se la casella è stata spuntata per abilitare i nostri campi. Questa funzione s’invocherà la prima volta quando il DOM è caricato attraverso la funzione $(document).ready(function() {}); e successivamente quando cambia lo stato della casella per l’intervento dell’utente.
”Live
” startwrap=”” endwrap=”“]
La scelta
⤽
Se non c’è quest’ultima essigenza, che con jQuery ci assicura il suo funzionamento con tutti i tipi di browser, e vogliamo solo evidenziare i campi quando sono selezionati e cambiare il suo aspetto a seconda se sono abilitati o meno ci basta inserire nel file CSS le tre regole dell’ultimo codice.