Personalizzare checkbox html. Customizing checkbox form html. Ie6 compatibile.

Se avete mai avuto il bisogno di poter effettuare lo skinning di elementi checkbox in pagine html, ovvero sostituire il bruttissimo e classico quadratino per la spunta, con la vostra grafica, per dare un tocco di eleganza e personalizzare la vostra pagina web, potrete vedere nel seguente videotutorial i passi da fare per riuscire in pochissimi minuti nell’impresa altrimenti non proprio banale.

In questo tutorial vedremo dunque come :

1. nascondere il checkbox originale.
2. Sostituire il checkbox originale con uno creato ad hoc da noi stessi.
3. Come far in modo che il checkbox sia cliccabile in tutti i browser (da internet explorer 6 in poi) anche quelli che non supportano CSS3

Il progetto si avvale esclusivamente di “trucchi” CSS per soddisfare i primi 2 punti, e dell’aiuto di selectivizr ( una utility JavaScript che emula le pseudo-classi CSS3 e i selettori di attributo in Internet Explorer 6 a Internet explorer 8 ) per rendere la nostra checkbox cliccabile.

Inoltre la tecnica utilizzata non genera “interferenze” o incompatibilità rendendo comunque il codice validabile e non effettua il replacement a runtime come alcuni plugin per lo styling delle form html (jqTransform ad  esempio) che successivamente danno l’impossibilità di accedere a runtime agli elementi html precedentemente dichiarati.

Attualmente questo è il modo più semplice e pulito per effettuare la personalizzazione di checkbox html.

Il file zip con l’esempio è scaricabile cliccando qui.