Eu tenho uma lista de caixas de seleção em uma tabela. (um de vários CBs na linha)

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

Gostaria de substituir a imagem da caixa de seleção por um par de imagens on / off personalizadas e fiquei pensando se alguém teria alguma compreensão melhor de como fazer isso com CSS?

Eu encontrei este tutorial "CSS ninja", mas devo admitir que acho um pouco complexo para mim.http://www.thecssninja.com/css/custom-inputs-using-css

Até onde eu sei, você tem permissão para usar uma pseudo classe

 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 caixa de seleção fosse, pelo menos, padrão para exibir a imagem no estado OFF e, em seguida, 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 uma etapa crítica em algum lugar. Tentei usar a sintaxe do seletor CSS3 personalizado para corresponder à minha configuração atual - mas deve estar faltando alguma coisa (as imagens são do tamanho 16x16, se isso importa)

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

Edição: Eu estava faltando algo no tutorial onde ele aplica a alteração de imagem para o rótulo e não a entrada em si. Ainda não estou obtendo a imagem trocada esperada para o resultado da caixa de seleção na página, mas acho que estou mais perto.