Substituição de imagem de checkbox de seleção CSS puro

Eu tenho uma lista de checkbox em uma tabela. (um dos vários CB’s na fila)

    

Eu gostaria de replace a imagem da checkbox de seleção por um par de imagens personalizadas on / off e eu queria saber se alguém tinha algum melhor entendimento de como fazer isso com CSS?

Eu encontrei este tutorial “CSS ninja”, mas vou ter que admitir que achei um pouco complexo para mim. http://www.thecssninja.com/css/custom-inputs-using-css

Tanto quanto eu posso dizer, você está autorizado a usar uma pseudo-class

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

Minha expectativa era que, adicionando o CSS acima, a checkbox de seleção, pelo menos, padrão para exibir a imagem no estado OFF e, em seguida, eu adicionaria o seguinte para obter o ON

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

Infelizmente, parece que estou perdendo um passo crítico em algum lugar. Eu tentei usar a syntax do seletor CSS3 personalizado para combinar com a minha configuração atual – mas deve estar faltando alguma coisa (as imagens são tamanho 16×16, se isso importa)

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

EDIT: eu estava faltando alguma coisa no tutorial onde ele aplica a mudança de imagem para o label e não a input em si. Ainda não recebo a imagem trocada esperada pelo resultado da checkbox de seleção na página, mas acho que estou mais perto.

Você já está perto. Apenas certifique-se de ocultar a checkbox de seleção e associá-la a um label que você estilize por meio da input[checkbox] + label

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

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

Usar o javascript parece ser desnecessário se você escolher CSS3.

Ao usar :before seletor, você pode fazer isso em duas linhas de CSS. (sem script envolvido).

Outra vantagem dessa abordagem é que ela não depende da tag e funciona, mesmo que esteja faltando.

Nota: em navegadores sem suporte a CSS3, as checkboxs de seleção parecerão normais. (compatível com versões anteriores).

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

Você pode ver uma demonstração aqui: http://jsfiddle.net/hqZt6/1/

e este com imagens:

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

Se você ainda está procurando mais personalização,

Confira a seguinte biblioteca: https://lokesh-coder.github.io/pretty-checkbox/

obrigado