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

у меня есть список checkbox в таблицу. (один из ряда 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 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 флажок будет по крайней мере по умолчанию для отображения изображения в выключенном состоянии, а затем я бы добавил следующее, Чтобы получить 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

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

3 72
css css3 css-selectors checkbox

3 ответа:

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

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

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

115

использование 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/

36

Если вы все еще ищете дополнительные настройки,

Проверьте следующую библиотеку:https://lokesh-coder.github.io/pretty-checkbox/

спасибо

3