Чисто семантическое решение HTML / CSS
Это легко реализовать самостоятельно, заранее не требуется готовое решение. Кроме того, это многому вас научит, так как вам не слишком легко работать с CSS.
Это то, что вам нужно сделать:
Ваши флажки должны иметь различные idатрибуты. Это позволяет вам подключиться <label>к нему, используя метку for-attribute.
Пример:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Прикрепление ярлыка к флажку вызовет поведение браузера: всякий раз, когда кто-то щелкает ярлык (или изображение внутри него), флажок будет переключаться.
Далее вы скрываете флажок, применяя, например, display: none;к нему.
Теперь все, что осталось сделать, это установить стиль, который вы хотите для своего label::beforeпсевдоэлемента (который будет использоваться в качестве элементов замены визуального флажка):
label::before {
background-image: url(../path/to/unchecked.png);
}
В последнем сложном шаге вы используете :checkedпсевдо-селектор CSS , чтобы изменить изображение, когда флажок установлен:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
+( Смежный селектор родственный ) гарантирует , что вы изменить только метки , которые непосредственно следуют скрытый флажок в разметке.
Вы можете оптимизировать это, помещая оба изображения в карту спрайта и применяя только изменение background-positionвместо замены изображения.
Конечно, вам нужно правильно расположить этикетку и применить display: block;и установить правильно widthи height.
Редактировать:
В примере с фрагментом кода и фрагменте кода, которые я создал после этих инструкций, используется та же методика, но вместо использования изображений для флажков, замены флажков выполняются исключительно с помощью CSS , создавая ::beforeметку на ярлыке, который после проверки content: "✓";. Добавьте несколько скругленных границ и приятных переходов, и результат действительно приятен!
Вот рабочий код, который демонстрирует технику и не требует изображений для флажка:
http://codepen.io/anon/pen/wadwpx
Вот тот же код в фрагменте:
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>
