Personalizar CheckBox con FancyForm

FancyForm es un script basado en Mootools que te permitirá darle estilo propio a los checkbox y radio buttons mediante css.

Puedes ver un ejemplo en http://casinada.freetzi.com/fancyform/ o también en la página oficial: http://lipidity.com/fancy-form/demo/

Para usarlo primero hay que descargar los archivos: http://pub.lipidity.com/fancy-form.zip.

Incluimos los js en nuestro html:

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

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

Y ahora hay que hacer el css. Los checkbox deben tener dos estilos llamados ckecked y unchecked, y los radio buttons selected y unselected.

Pero, hay que hacer una pequeña corrección, puesto que el fondo se va a repetir y no se va a ver correctamente. El Css completo queda así:

.f_checkbox,.f_radio {

background-repeat:no-repeat;

background-position:3px center;

height:16px;

display:block;

cursor:pointer;

line-height:120%;

}

.f_radio {

padding:4px 24px;

}

.f_checkbox {

padding:0.5em 24px;

}

.unchecked {

background-image:url(chk_off.png);

}

.checked {

background-image:url(chk_on.png);

}

.unselected{

background-image:url(rdo_off.png);

}

.selected{

background-image:url(rdo_on.png);

}

Ahora únicamente hay que crear los input como de costrumbre, dentro de un label con la clase f_checkbox o f_radio respectivamente:

<label class='f_radio'><input type='radio' name='gender' value='male'> Masculino</label>

<label class='f_checkbox'><input type='checkbox' name='newsletter' checked='checked'> Deportes</label>

Para terminar les dejo un comprimido con los archivos de este tutorial (incluido los js): http://casinada.freetzi.com/?d=fancyform.rar

Hasta la próxima!!!