Чистая замена изображения флажка CSS

У меня есть список флажков в таблице. (один из ряда CB в ряду)

I ' Я хочу заменить изображение флажка парой настраиваемых изображений включения / выключения, и мне было интересно, есть ли у кого-нибудь лучшее понимание того, как это сделать с помощью CSS?

Я нашел этот учебник "CSS ninja", но я Должен признаться, что для меня это было немного сложно. http://www.thecssninja.com/css/custom-inputs-using-css

Насколько я могу судить, вам разрешено использовать псевдокласс

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

Я ожидал, что добавив в приведенном выше CSS флажок, по крайней мере, по умолчанию будет отображать изображение в состоянии ВЫКЛЮЧЕНО, а затем я бы добавил следующее, чтобы получить ВКЛЮЧЕНИЕ

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

К сожалению, похоже, что я где-то пропустил важный шаг. Я пытался использовать собственный синтаксис селектора CSS3, чтобы он соответствовал моим текущим настройкам, но, должно быть, чего-то не хватает (изображения имеют размер 16x16, если это имеет значение)

http: //www.w3. Мне что-то не хватало в руководстве, где он применяет изменение изображения к метке, а не к самому вводу. Я все еще не получаю ожидаемого результата подкачки изображения для флажка на странице, но думаю, что я ближе.