CSS  »  Articoli  »  Effetti con CSS 

Agire sullo stile in base allo stato dei campi

Finora ci siamo concentrati su proprietà cross-browser e con nessun problema di compatibilità (non considero nemmeno Netscape 4, per cui rimando all'articolo citato all'inizio). Mi piace però segnalarvi un paio di proprietà davvero interessanti che ahimè non trovano supporto nel più diffuso tra i browser: Explorer 5/6 su Windows. I possessori di Mozilla, Netscape 6/7 o Explorer Mac potranno invece valutarne efficacia e attrattive.

Si tratta del supporto di tre delle cosiddette pseudo-classi. Nei CSS una pseudo-classe definisce lo stile di un elemento in base allo stato. L'utilizzo più classico e diffuso è quello dei vari :link, :hover o :visited per Definire gli stili dei link con i CSS: tra estetica e usabilità.. Come i link, anche i campi di un form possono avere particolari condizioni di stato.

Esempio: quando inseriamo il cursore in un campo di testo, si dice che quel campo ha in quel momento il focus. Bene: un ottimo effetto può essere quello di cambiare il colore di sfondo dell'input quando esso riceve il focus. Ecco il semplicissimo frammento di codice:

input.text:focus {
    background: #CCCCFF;
    }

Allo stesso modo possiamo usare le pseudo-classi :hover e :active per modificare il comportamento e il colore di un pulsante al passaggio del mouse e quando viene premuto: in pratica un rollover. È importante in questo caso definire prima lo stile per :hover rispetto a quello di :active. Codice:

input.pulsante:hover {
    background: #CCCCFF;
    }
    input.pulsante:active {
    background: #00CCFF;
    }

Per ottenere lo stesso effetto in Explorer Win dobbiamo ricorrere ad uno swap della classe, come ben spiegato da Saibal nell'I Form: segreti e trucchi di personalizzazione.

Esercizi di stile

Nell'esempio 3 ci siamo un pò divertiti. Abbiamo testato la capacità di impostare un'immagine di sfondo per gli elementi di un form. Diciamo che è per siti moooolto cool e per maniaci della texture, ma funziona bene in tutti i browser degni di questo nome. Nell'esempio noterete la texture soprattutto nella textarea, elemento su cui l'effetto è più visibile e realistico, viste le dimensioni. Il codice usato per la textarea vale per tutti (vi rimando alla pagina per il codice completo del CSS):

textarea.sfondo {
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    background: #CCCCCC url(sfondo.gif);
    width: 140px;
    border: 1px solid #000000;
    padding-right: 5px;
    padding-left: 5px;
    }

L'esempio 4 riguarda invece l'elemento <select>. Qui le possibilità di intervento sono minori ma gli effetti comunque interessanti. Tanto per cominciare: non è possibile modificare l'aspetto con i bordi. E questo è un problema: perchè in un modulo come quelli visti prima, stonerebbe un pò un select con il classico bordo rialzato. Ma andiamo oltre. Possiamo tranquillamente impostare le caratteristiche dei font, il colore di sfondo e la larghezza (attenzione se avete testi per le opzioni un pò lunghi!). Ecco come abbiamo definito gli stili del nostro select:

#select {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background: #CCCCCC;
    width: 170px;
    }

È possibile poi intervenire anche sui componenti di questo tipo di elemento: parlo del classico <option>, ma anche del meno noto ma utilissimo <optgroup>. Nell'esempio abbiamo creato appunto tre gruppi di opzioni assegnando a ciascuno una classe:

<select name="select" id="select" size="1">

<option value="" selected id="selezionato">Scegli la provincia</option>
<optgroup class="opt1" label="Lombardia">

.......................................

</optgroup>
<optgroup class="opt2" label="Toscana">

.......................................

</optgroup>
<optgroup class="opt3" label="Sicilia">

......................................

</optgroup>
</select>

Per ciascuna classe abbiamo impostato semplicemente un diverso colore di sfondo, lasciando che venissero ereditate le impostazioni per i font:

.opt1 {
    background: #CCCCCC;
    }
    .opt2 {
    background: #CCCCFF;
    }
    .opt3 {
    background: #FFCCFF;
    }

L'effetto non è solo esteticamente gradevole, ma rende più facilmente leggibili le diverse opzioni. La stessa cosa si può fare sul tag <option>, ma se sono molte risulta un pò complicato impostare un gran numero di classi per ciascuna di esse.

Ricordiamo che è possibile intervenire sui Coloriamo scroll-bars e form con i CSS, ma solo con Explorer 5.5/6 per Win.

Rimangono un pò fuori dal gioco checkbox e Radio Button. L'unica proprietà su cui vale la pena intervenire per questi minuscoli campi è il colore di sfondo. Se poi volete un checkbox enorme vi basta impostare adeguatamente la proprietà width...A voi il piacere della scoperta. Alla prossima.

Altri articoli

Altre guide

Altre newsletter