Personaliza tus checkboxes y radio buttons con MooForms

Hoy he dado con MooForms, una clase de Mootools que permite personalizar los checkbox y radio buttons de los formularios, reemplazandolos por imágenes personalizadas usando «CSS background position«.

MooForms esta inspirado en el script de Ryan Fait y ha sido provado y comprobado que funciona en:

• Internet Explorer 7, 6 & 5.5
• Firefox 2
• Opera 9
• Safari 2
• Konqueror

Demo | Descargar | Más información

Ejemplo de utilización

Cargamos las librerias en el HEAD:

<script type="text/javascript" src="./mootools.js"></script>
<script type="text/javascript" src="./mooforms.js"></script>

Llamamos y creamos la clase:

<script>
window.addEvent('domready', function() {
       myFrom2 = new mooForms('myForm', {
       imageDir: './images/',
       checkboxImage: {image: 'checkbox.gif', width: 16, height: 20},
       radioImage: {image: 'radio.gif', width: 16, height: 20},
       spacer: 'spacer.gif',
       inputs: ['checkbox', 'radio'],
       labelPosition: 'left'
    });
});
</script>

El formulario XHTML:

<form id="myForm">
<div>
<input type="checkbox" name="checkbox[]" value="1" checked="checked" /><label for="#">option 1</label>
<input type="checkbox" name="checkbox[]" value="1" /><label for="#">option 2</label>
<input type="checkbox" name="checkbox[]" value="1" /><label for="#">option 3</label>
</div>
<p>some text</p>
<div>
<input type="radio" name="radio1" value="1" /><label for="#">option 1</label>
<input type="radio" name="radio1" value="1" /><label for="#">option 2</label>
<input type="radio" name="radio1" value="1" /><label for="#">option 3</label>
</div>
</form>