Checkboxes y Radio Buttons elegantes con jQuery/CSS
Los formularios forman parte de prácticamente todos los sitos y aplicaciones web de hoy en dÃa. Si bien con la ayuda de CSS simple podemos personalizarlos hasta cierto punto, siempre llega un momento en el que las queridas hojas de estilo ya no pueden ayudarnos, y debemos hecharle mano a nuestro adorado y salvador jQuery.
Â
Imágen extraida del sitio web de prettyCheckboxes
En este post vamos a enfocarnos en los radio buttons y checkboxes, o “botones de opcion” y “casillas de verificación”… como nos guste llamarles.
He probado con varios plugins de jQuery, e incluso personalizarlos bastante, pero considero que prettyCheckboxes es uno de los más sencillos de utilizar. Para incluirlo en tu diseño solo tienes que:
1.- Importar jQuery (por supuesto) y el archivo prettyCheckboxes.js que podrás descargar de este sitio (allà encontraras ejemplos y una explicación mas detallada)
2.- Inicializar prettyCheckboxes (para todos los checkbox y radio buttons de la página):
$(document).ready(function(){
$('input[type=checkbox],input[type=radio]').prettyCheckboxes();
});O inicializarlo solo para algunos elementos de tus formularios:
$(document).ready(function(){
$('input.myCheckbox').prettyCheckboxes();
});Y eso es todo, ahora solo falta personalizar las imágenes (que descargas de la página de prettyCheckboxes para que se vean según tu diseño.
Deja un comentario