Чисте семантичне рішення HTML / CSS
Це легко здійснити самостійно, не потрібно заздалегідь прийняте рішення. Крім того, це навчить вас багато чому, оскільки вам не здається занадто простим із CSS.
Це те, що вам потрібно зробити:
У ваших прапорцях повинні бути чіткі idатрибути. Це дозволяє вам підключити a <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);
}
На останньому хитромудрому кроці ви використовуєте CSS ' :checked щоб змінити зображення, коли прапорець встановлений:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
+( Суміжний селектор споріднений ) гарантує , що ви змінити тільки мітки , які безпосередньо випливають прихований прапорець в розмітці.
Ви можете оптимізувати це, розмістивши обидва зображення в спрайті та застосувавши лише зміни background-position замість заміни зображення.
Звичайно, ви повинні правильно розмістити етикетку та застосувати display: block;та встановити правильнуwidth та height.
Редагувати:
Приклад і фрагмент codepen, які я створив після цих інструкцій, використовують ту саму техніку, але замість використання зображень для прапорців, заміни прапорець здійснюються виключно 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>
