CSS: custom checkbox without "lables" and JS

Question

I read more or less everything about checkbox and radio inputs customization... I'm trying to develop a webapp in which my desire is to enhance its look and compatibility with all current browsers.

I choose the "sprite" method, avoiding the use of labels (my webapp can't use labels).

this is the CSS code I'm currently using:

input[type='checkbox'], input[type='radio']{      
   background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); 
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
   margin: 0;
   padding: 0;
   -moz-appearance: none; /* not working */
   -webkit-appearance: none;
   -ms-appearance: none; /*not working */
   -o-appearance: none;
   appearance: none;
}
/* not checked */
input[type='radio']{background-position: -32px 0; }
/* checked */
input[type='radio']:checked { background-position: -48px 0;}
input[type='checkbox']:checked { background-position: -16px 0; }
input[type='checkbox']:hover:checked, 
input[type='checkbox']:focus:checked { background-position: -16px -16px; }
input[type='radio']:hover:checked,
input[type='radio']:focus:checked { background-position: -48px -16px; }
/* focus */
input[type='checkbox']:hover,
input[type='checkbox']:focus { background-position: 0 -16px; }
input[type='radio']:hover,
input[type='radio']:focus { background-position: -32px -16px; }
/* active */
input[type='checkbox']:active { background-position: 0 -48px; }
input[type='radio']:active { background-position: -32px -48px; }
input[type='checkbox']:active:checked { background-position: -16px -48px; }
input[type='radio']:active:checked { background-position: -48px -48px; }
/* disabled */
input[type='checkbox']:disabled { background-position: 0 -32px; }
input[type='radio']:disabled { background-position: -32px -32px; }
input[type='checkbox']:disabled:checked { background-position: -16px -32px; }
input[type='radio']:disabled:checked{ background-position: -48px -32px; }
input[type='checkbox']:hover:disabled,
input[type='checkbox']:focus:disabled { background-position: 0 -32px; }
input[type='radio']:hover:disabled ,
input[type='radio']:focus:disabled { background-position: -32px -32px; }
input[type='checkbox']:hover:disabled:checked ,
input[type='checkbox']:focus:disabled:checked { background-position: -16px -32px; }
input[type='radio']:hover:disabled:checked,
input[type='radio']:focus:disabled:checked { background-position: -48px -32px; }

Here, a JSFiddle, to have a look on how it works: http://jsfiddle.net/Kztwn/3/

Now, the question is: how to make it work on Firefox, without lables? This is the result I obtain on iExplorer (IE), FireFox(FF), Opera (O), Chrome (C), and Safari (S): http://i.stack.imgur.com/Grbw3.png

I can accept IE isn't working, but FF...how can I hide the default input style?

Ideas? Can anyone help me in finding the right solution?

Thanks in advance!

Nick