FancyForm: CSS para checkbox

26/11/2007
10:58 pm
unijimpe

FancyForm es un script que te permitirá aplicarle el estilo que tu deseas a tus checkboxs o radio buttons. Este script esta basado en Mootools y un CSS que te permitirán cambiar fácilmente el estilo en tus formulario.

Como utilizarlo
Lo primero es descargar los archivos desde FancyForm v0.91, luego de ello lo siguiente es incluir las librerías mootools.js y moocheck.js de la siguiente forma:

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

Lo siguiente es 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);
}

Lo siguiente es crear los campos tipo checkbox y radio button como de costumbre. Pueden ver el ejemplo funcionando en FancyForm Test.

Como ven muy sencillo de implementar, lo único de lo que hay que preocuparse es en armar correctamente el estilo para estos campos. Si desean hay muchas mas opciones para personalizar y dar mejores efectos visuales a los formularios y los pueden ver en la pagina oficial de FancyForm.

Posts Relacionados