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

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

 <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>

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

Я нашел этот учебник "CSS ниндзя", но я должен признать, что это немного сложно для меня. 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, флажок по крайней мере по умолчанию отображал бы изображение в состоянии OFF, а затем я добавил бы следующее, чтобы получить ON

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

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

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

EDIT: Я упустил что-то в учебнике, где он применяет изменение изображения к метке, а не сам ввод. Я все еще не получаю ожидаемое изображение с заменой для результата checkbox на странице, но думаю, что я ближе.

Ответы

Ответ 1

Ты уже рядом. Просто убедитесь, что вы спрятали флажок и связали его с ярлыком, который вы используете, с помощью input[checkbox] + label

Полный код: http://gist.github.com/592332

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

Ответ 2

Использование javascript кажется ненужным, если вы выберете CSS3.

Используя селектор :before, вы можете сделать это в двух строках CSS. (нет script).

Другим преимуществом такого подхода является то, что он не полагается на тег <label> и работает даже без него.

Примечание: в браузерах без поддержки CSS3 флажки будут выглядеть нормально. (обратная совместимость).

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

Здесь вы можете увидеть демо: http://jsfiddle.net/hqZt6/1/

и этот с изображениями:

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