Corsi on-line

Customizzare gli elementi di un form: checkbox, radio e select da urlo!

A seguito delle richieste di un cliente ho dovuto approfondire le possibilità di personalizzazione grafica degli elementi di un comune modulo HTML (form). Nessun problema, ovviamente, per i normali campi di testo (sia input che textarea) dove, grazie ai CSS, non è certo complesso cambiare i colori o aggiungere sfondi personalizzati. Stesso dicasi per i bottoni e, in minor modo, anche per le select. Più complicato il discorso relativo ai checkboxes ed ai radio buttons.

In particolare il cliente si era “innamorato” della grafica di un software gestionale installato sul suo PC e voleva che questi elementi apparissero esattamente come nel suo software. Fortunatamente, facendo una ricerchina in Google, mi sono imbattuto in una risorsa che faceva al caso mio ed ho scoperto che grazie ad un po’ di CSS ed un piccolo Javascript è possibile personalizzare con semplicità anche questi elementi.

Di seguito uno screenshot in cui potete vedere l’effetto della stilizzazione (elementi cerchiati in rosso) applicato su checkbox, radio e select.

Per ottenere questo effetto è sufficiente includere nella pagina un file .js (lo script) ed un foglio di stile. Dopodichè è sufficiente aggiungere il riferimento alla classe “styled” agli elementi che vogliamo customizzare. Ad esempio:

<input type="checkbox" class="styled" />

L’esempio completo e funzionante può essere scaricato da questa pagina.

Post correlati
  • Carlo

    Bellissimo! Non sapevo si potessero creare dei checkbox così belli!!!

  • sono d’accordo con Carlo.
    il solito MA:
    dai max, fai un piccolo sforzo: aggiusta il js per fare bello anche il tasto di submit (e reset e “possibilmente” i campi text) che rimane completamente fuori stile.

    potrebbe essere un bel regalo per i forumisti

  • Ma per modificare un input text o un tasto non ci vuole tutta quella “roba” basta un normale foglio di stile con una o due immagini.
    Invece mi pare di capire guardando il javascrpit così di corsa che tutto quel che fa è creare al volo uno span nel codice e usarlo per mettere un’immagine da sovrapporre a quella di default.

  • Massimiliano Bossi

    Sì, esatto. Customizzare input text o un bottone è molto semplice (basta giocherellare coi css ad esempio mettendo uno sfondo grafico agli elemnti)… nel caso dei bottini possiamo inserire anche direttamente un’immagine fatta da noi… la cosa “curiosa” di questo script è che consente di customizzare degli elementi (come checkbox e radio) che non sono di immediata personalizzazione.

I più letti del mese
Tematiche