Blog

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

22nd Giu 2011 | Posted in: Blog, Programmazione  | visualizzazioni 2

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.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Digg
  • LinkedIn
  • oknotizie
  • MySpace
  • Technorati
  • Live
  • Slashdot
2 Comments
  1. Martin
    11:43 on Ottobre 20th, 2011

    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!

  2. Kedar
    19:37 on Ottobre 11th, 2012

    Thanks Friend

Lascia un commento