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

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

75 голосов
/ 22 сентября 2010

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

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

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

Ответы [ 3 ]

119 голосов
/ 22 сентября 2010

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

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

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

36 голосов
/ 07 августа 2012

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

3 голосов
/ 22 июля 2016

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

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

Спасибо

...