Estilos en Checkboxs y Radio buttons con FancyForm

Con FancyForm podremos aplicar estilos a nuestros Checkboxs y Radio buttons. Este script funciona con Mootools y un CSS muy fáciles de implementar, veamos como.

Primero deberemos descargar la última versión desde la sección de descargas de la web oficial, e incluir los scripts mootools.js y moocheck.js de la siguiente forma:

Ver como Texto PlanoImprimir?

1. <script type="text/javascript" src="js/mootools.js"></script>  
2. <script type="text/javascript" src="js/moocheck.js"></script>  

Luego debemos crear los estilos, para los checkbox hay que crear dos estilos llamados checked y unchecked y para los radio buttons dos estilos llamados selected y unselected. Por ejemplo, podemos crear los estilos en donde hemos reemplazado estos campos por imágenes:

Ver como Texto PlanoImprimir?

1. .checked {  
2.     background-color:#222;  
3.     background-image:url(chk_on.png);  
4. }  
5. .unchecked {  
6.     background-color:#1c1c1c;  
7.     background-image:url(chk_off.png);  
8. }  
9. .selected {  
10.     background-color:#222;  
11.     background-image:url(rdo_on.png);  
12. }  
13. .unselected {  
14.     background-color:#1c1c1c;  
15.     background-image:url(rdo_off.png);  
16. }  

.checked {
    background-color:#222;
    background-image:url(chk_on.png);
}
.unchecked {
    background-color:#1c1c1c;
    background-image:url(chk_off.png);
}
.selected {
    background-color:#222;
    background-image:url(rdo_on.png);
}
.unselected {
    background-color:#1c1c1c;
    background-image:url(rdo_off.png);
}

Y finalmente debemos crear nuestros Checkboxs y Radio buttons como de costumbre. Podemos ver un ejemplo en funcionamiento es FancyForm Test.

Saludos y que lo disfruten!