Mejora la apariencia de los checkbox con CSS3 y JQuery

Asi como en ejemplos anteriores mostramos como mejorar la apariencia de nuestros textbox, les mostrare como mejorar la apariencia de nuestros checkboxes de nuestras paginas web con algunas lines de codigo CSS/CSS3 y JQuery.

El ejemplo de arriba es un ejemplo de un simple checkbox con CSS. Este tipo de checkbox es usado por Twitter y Google y es parte del Bootstrap Framework (Prepended checkbox) de Twitter. Simplemente lo he modificado para mi uso personal y lo he usado de un modo diferente. Aqui estan los codigos para el checkbox.
En HTML:

El CSS para el checkbox por defecto:

.checky{
   width: auto;
   min-width: 16px;
   height: 18px;
  padding: 4px;
  margin-right: -1px;
   font-weight: normal;
   line-height: 18px;
  text-align: center;
  -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   background: #dddfff;
   border: 1px solid #aaa;
 color: #bfbfbf;
 text-shadow: 0 1px 0 #ffffff;
}

El CSS para el checkbox marcado:

.greeny{
  background: #a9dba9;
  border-color: #46a546;
}

Aqui estan las lineas del JQuery:

$(document).ready(function(){
    $('.checky :checkbox').click(function () {
    if ($(this).attr('checked')) {
      $(this).parents('.checky').addClass('greeny')
    }
     else {
      $(this).parents('.checky').removeClass('greeny')
    }    
    })/******* Fix for Firefox and some other browsers *****/$(":checkbox:checked").each(
        function() {
           $(this).parents('.checky').addClass('greeny');
        }
    ); 
})

El ejemplo completo pueden bajarlo aqui (aprovechen antes que se apruebe la Ley SOPA):

Descargar aqui

Pruebenlo en Chrome creo que en algunas versiones de Explorer no resulta o pide habilitar Javascript, no lo probe en todos los navegadores pero Chrome si lo soporta.