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:
<!-- 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.
/* 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:

<!-- 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.
/* 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.
Similari
25 Tricks in CSS da conoscere
19% Css
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …
Selettori CSS definiti
17% Css
Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad a…
Sporca e veloce finestra modal
17% JQuery
Se avete bisogno di una finestra modale e avete jQuery caricato si può semplicemente personalizzare e incollare le seguenti righe di codice in qualsiasi gestore di eventi o eventhandler per far apparire rapidamente un mess…
Finestre di messaggio CSS con CSS3
16% Css3
Quando si sviluppano applicazioni Web e si vuole visualizzare i messaggi all’utente, sarebbe opportuno renderli il più chiaro possibile. Inoltre, i colori possono dare all’utente una rapida occhiata su quello che sta succe…
Problemi di Internet Explorer con CSS
13% Css
Cercando di ottenere siti web CSS-based con lo stesso aspetto in tutti i browser spesso può essere difficile. Molti dei problemi invece si trovano con Internet Explorer che implementa dei comandi CSS diversamente da altri,…