Чистий CSS-прапорець заміни зображення

У мене є список прапорців у таблиці. (один із ряду КБ на ряду)

 <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, прапорець, принаймні, за замовчуванням відображатиме зображення у вимкненому стані, а потім я додав би наступне, щоб увімкнути

 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/# проверено

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

Ви вже близько. Просто не забудьте приховати прапорець і пов’язати його з міткою, за допомогою якої ви стилізуєтеinput[checkbox] + label

Повний код: http://gist.github.com/592332

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

Використання javascript здається непотрібним, якщо ви вибрали CSS3.

За допомогою :beforeселектора ви можете зробити це у двох рядках CSS. (сценарій не задіяний).

Ще однією перевагою цього підходу є те, що він не покладається на <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/

Якщо ви все ще шукаєте подальших додаткових налаштувань,

Перевірте наступну бібліотеку: https://lokesh-coder.github.io/pretty-checkbox/

Дякую