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:

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:

.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!