Personalizar elementos HTML: Checkbox y Radio Buttons

No hay objetos HTML más utilizados en formularios y que, probablemente, hayan sufrido menos cambios a lo largo de la historia que los checkboxes y radio buttons. Su visualización por defecto es prácticamente la misma que la de sus primeras versiones. Para nuestra suerte y gracias a la potencia de jQuery modificar su aspecto es algo muy sencillo.

Para lograr personalizar un objeto checkbox o botón del tipo radio podemos recurrir a varios métodos, como así también a un simple plugin desarrollado con jQuery. Justamente sobre la ultima opción quiero hacerles una recomendación y es iCheck.

iCheck es un simple pero no por eso menos potente plugin jQuery para personalizar esta clase de objetos de una forma sencilla y sin apenas escribir código.

checkbox y radio buttons personalizados

El plugin es súper fácil de utilizar, tan solo debemos inicializar iCheck con una clase o identificador correspondiente a alguno de estos dos elementos. Eso es todo, no necesitamos reescribir la estructura HTML ni similar. La principal ventaja de esto es que podemos escribir código perfectamente valido, aplicando los estándares web sin ningún tipo de inconvenientes a la vez que damos un aspecto más moderno a nuestros formularios.

Ejemplo de uso:

// Personalizamos todos los elementos del tipo checkbox y radio
$('input').iCheck();

// Personalizamos solos los elementos con clase block
$('.block input').iCheck();

Si están interesados en modificar la visual de estos dos elementos les recomiendo encarecidamente visitar el sitio oficial del proyecto, van a ver muchísimos ejemplos con distintos niveles de personalización, hasta el momento el mejor plugin de este tipo que tuve la oportunidad de probar.

El talón de Aquiles de este tipo de plugins: su compatibilidad con los distintos navegadores. iCheck funciona perfectamente en Internet Explorer 7+, Firefox 2+, Chrome, Safari 3+ y Opera 9 o superior. Muy aceptable 😀

Web: iCheck