Customizando checkboxes

En esta oportunidad quiero presentarles una muy sencilla manera de customizar el elemento input checkbox de HTML para, en lugar de usar el clásico cuadradito, utilizar un par de imágenes para indicar el estado del mismo.

Como primera medida necesitaremos obviamente las dos imágenes que deseamos utilizar ( en lo posible que sus dimensiones sean de aprox. 16px X 16px ).

Lo que entonces debemos lograr es, de alguna manera, que la imagen ocupe el lugar del checkbox (o que así lo parezca). De una forma simple podemos simular esto: el truco consiste entonces en hacer transparente el checkbox y poner la imagen como background-image de un elemento que contenga dicho check:

• para hacer transparente el checkbox simplemente hacemos uso de la propiedad opacity vía CSS (tener en cuenta que esta propiedad se configura diferente según el browser):
  

  input[type="checkbox"].miCheck {
     filter: alpha(opacity=0); /* IE */
     opacity: 0.0; /* FF/Chrome/Safari/Opera */
     cursor: pointer;  
  }
  

  NOTA IMPORTANTE: para que en IE esta propiedad funcione debe especificarse el DOCTYPE de la página, con usar el HTML 4.01 Transitional servirá.
 
• Una vez oculto el check procederemos a determinar la posición de la imagen transpuesta como así también la propiedad repeat para que se muestre una sola vez:
  
  Código CSS
  

  div.contenedorMiCheck {
     background-position: left;
     background-repeat: no-repeat;
  }           
  

• Para terminar el diseño solo nos queda el código HTML:
  

  <div class="contenedorMiCheck">
     <input class="miCheck" type="checkbox"/>
            Mi check
  </div>
  

• Ahora bien, lo que nos está faltando es darle la funcionalidad de cambiar la imagen ya sea que el check esté activo como si no lo esté. Para esto utilizaremos javascript y nos ayudaremos para hacer mas breve el código de la librería jQuery.
  
  Código javascript
  

  $(document).ready(setUpMiCheck);
  function setUpMiCheck() { 
     /*Cada vez que se haga click cambiara la imagen*/
     $("input[type='checkbox'].miCheck").click(toggleCheck);
    /* Para determinar la imagen a mostrar */
    /* al cargar la página */
     $("input[type='checkbox'].miCheck").each(toggleCheck);
  } 
   /* Esta funcion cambia la imagen a mostrar */
   /* (que se encuentra en el elemento padre */
   /* del check) ya sea si el checklist */
   /* está activo como si no lo está*/
   function toggleCheck() {
     if ($(this).is(":checked"))
         $(this).parent().css("background-image","url('imgs/check_on.png')"); 
     else 
         $(this).parent().css("background-image","url('imgs/check_off.png')");       
   }  
  

Listo, de esta manera simple podemos tener el mismo estilo en todos los navegadores independizándonos de como cada uno de estos renderiza un checkbox por defecto como así también nos brinda una mayor riqueza visual a la página.

Ejemplo:

Mi check