FancyForm: CSS para checkbox

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.

fancyform.jpg

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:

  1. <script type="text/javascript" src="js/mootools.js"></script>
  2. <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:

[css]
.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);
}
[/css]

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

fancyform-demo.jpg

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.

Comentarios Total 6 comentarios


Arcadio
Publicado: 27/11/2007 7:48 pm

wow…

javier gil montes
Publicado: 15/12/2007 2:09 pm

me ha gustao

Carlos
Publicado: 20/05/2009 4:40 am

Excelente!!

Gracias, me vino muy bien.

Diseño Web Algeciras
Publicado: 12/12/2010 5:12 pm

Muy buen aporte, excelente idea de personaliar nuestros checkbox. Salduso desde Algeciras

Alan García
Publicado: 01/04/2011 1:08 pm

Excelente !!!, very good !!!

Brujoz
Publicado: 02/05/2011 2:14 am

muy bueno, recomendado.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)