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 :
- nascondere il checkbox originale.
- Sostituire il checkbox originale con uno creato ad hoc da noi stessi.
- 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.
Very nice! I was wondering if it is possible, using just selectivizr and found your posting through Woofu comments. I’ve just went for this approach, but using :before for the checkbox mimic, will post sassed example sometime later. Cheers!
Thanks Friend