Son muchas las veces que me hubiese gustado personalizar algún Checkbox, bien para hacerlo más grande, cambiar algún color o cualquier cosa para conseguir que llamase más la atención o simplemente que cuadrase mejor con el resto del diseño de la Web. Cuando se intenta hacer esto con atributos de CSS se tarda bien poco en rechazar la idea por que el navegador hace lo que quiere, y además como es costumbre cada navegador hace una cosa diferente.
Hay varias posturas, los puristas del diseño y la Web acostumbran a decir que lo mejor, en pro de la usabilidad, sería no confundir al usuario en cuanto al uso de estos elementos… para que no le parezcan elementos diferentes en cada sitio que visite, aún siendo exactamente lo mismo.
Y en cierto modo… en alguna ocasión he tenido ese mismo punto de vista, el problema viene cuando la página en cuestión tiene un diseño muy llamativo y los checkbox rudimentarios pueden “romper” el conjunto, evidentemente no sería conveniente modificar el diseño de los checkbox en la intranet de un banco, o en el carrito de compra de una tienda online, pero si es la página de un videojuego, una red social o cualquier otro portal mas destinado a este tipo de ocio, no estaría de más que con un diseño lógico que no buscase confundir a nadie hiciese que los formularios de una página mantengan una “harmonía” con el resto de la página.
Elementos como las áreas de texto ya se pueden personalizar suficiente pero los Checkbox y los Radio Buttons han quedado “apartados” en cuanto a diseño, por eso Stéphane Caron ha desarrollado un script que apenas ocupa 2kb, y permite utilizar las imagenes que queramos para modificar tanto Checkbox como RadioButton, afortunadamente funciona en todos los navegadores de uso común.
Desde aquí podéis descargar el script, que necesita jQuery para funcionar.
Su uso es dificilmente simplificable, lo primero que hay que hacer es incluir la librería jQuery – si no se ha incluido ya – el código del script en la cabecera de la página donde se vaya a usar.
<script src="js/jquery.js" type="text/javascript">
<script src="js/prettyCheckboxes.js" type="text/javascript">
Un detalle importante es que para que el script funcione correctamente todas las etiquetas necesitan el atributo for enlazando con la ID de su checkbox / radio button correspondiente.
Iniciamos el script:
$(document).ready(function(){
$('input[type=checkbox],input[type=radio]‘).prettyCheckboxes();
});
Si solo se quiere iniciar el script con un elemento especifico, se puede hacer así:
$(document).ready(function(){
$('input.myCheckbox').prettyCheckboxes();
});
Una vez ya está iniciado, habría que definir algunos parametros para personalizarlo:
$(document).ready(function(){
$('input[type=checkbox],input[type=radio]‘).prettyCheckboxes({
checkboxWidth: 17, // The width of your custom checkbox
checkboxHeight: 17, // The height of your custom checkbox
className : ‘prettyCheckbox’, // The classname of your custom checkbox
display: ‘list’ // The style you want it to be display (inline or list)
});
});
Si se quieren marcar todos los checkbox que forman parte de un grupo, se puede utilizar la función checkAllPrettyCheckboxes().. Esta función necesita 2 parametros, el primero es una referencia al elemento que está llamando la función – casi siempre es “this” – y el segundo parametro hace referencia al contenedor de los checkbox, como por ejemplo $(’#checkboxDemo’).
<input id="checkbox-all" onclick="checkAllPrettyCheckboxes(this,$('#checkboxDemo'));" name="checkbox-all" type="checkbox" value="checkbox-all" />
Y ya está, la verdad es que es un buen script que facilita muchísimo el trabajo… y para facilitar aún más dan hasta unas imagenes para facilitarnos la tarea de diseñarlas.
Esta es la página del proyecto prettyCheckboxes (en inglés), donde se encuentran los mismos códigos que yo he posteado aquí, y además algunos ejemplos.