Reemplazo de imagen de Checkbox CSS puro

Tengo una lista de casillas en una mesa. (uno de varios CB en la fila)

    

Me gustaría reemplazar la imagen de la checkbox con un par de imágenes personalizadas de encendido / apagado y me preguntaba si alguien tenía una mejor comprensión de cómo hacer esto con CSS.

Encontré este tutorial de “CSS ninja”, pero tendré que admitir que es un poco complejo para mí. http://www.thecssninja.com/css/custom-inputs-using-css

Por lo que puedo decir, puedes usar una pseudoclase

  td:not(#foo) > input[type=checkbox] + label { background: url('/images/off.png') 0 0px no-repeat; height: 16px; padding: 0 0 0 0px; } 

Mi expectativa era que al agregar el CSS anterior, la checkbox al menos predeterminada mostraría la imagen en el estado DESACTIVADO y luego agregaría lo siguiente para obtener el

  td:not(#foo) > input[type=checkbox]:checked + label { background: url('/images/on.png') 0 0px no-repeat; } 

Lamentablemente, parece que me estoy perdiendo un paso crítico en alguna parte. Intenté usar la syntax del selector personalizado de CSS3 para que coincida con mi configuración actual, pero debe faltar algo (las imágenes son de tamaño 16×16 si eso es importante)

http://www.w3.org/TR/css3-selectors/#checked

EDITAR: Me había perdido algo en el tutorial donde aplica el cambio de imagen a la etiqueta y no a la entrada en sí. Todavía no obtengo la imagen intercambiada esperada para el resultado de la checkbox en la página, pero creo que estoy más cerca.

Ya estás cerca. Solo asegúrese de ocultar la checkbox y asociarla con una etiqueta que escriba mediante la input[checkbox] + label

Código completo: http://gist.github.com/592332

JSFiddle: http://jsfiddle.net/4huzr/

El uso de JavaScript parece ser innecesario si elige CSS3.

Al usar :before selector, puede hacer esto en dos líneas de CSS. (sin guión involucrado).

Otra ventaja de este enfoque es que no depende de la y funciona incluso si falta.

Nota: en navegadores sin soporte CSS3, las casillas de verificación se verán normales. (compatible con versiones anteriores).

 input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; } input[type=checkbox]:checked:before { background:green; }​ 

Puedes ver una demostración aquí: http://jsfiddle.net/hqZt6/1/

y este con imágenes:

http://jsfiddle.net/hqZt6/6/

Si todavía está buscando más personalización,

Consulte la siguiente biblioteca: https://lokesh-coder.github.io/pretty-checkbox/

Gracias