Checkbox дозволяють вибрати більше одного варіанта з запропонованих в формі. Розумно поєднуючи їх з CSS, можна отримати дивовижні речі. Ця стаття покликана продемонструвати деякі з креативних речей, що можна зробити з checkbox. Майте на увазі, в цій статті ми не будемо використовувати JavaScript.
Основна формула
Все починається з HTML.
<input id="toggle" type="checkbox">
<label for="toggle">
Нічого незвичного тут немає: атрибут for
в <label>
відповідає id
в <input>
, отже при натисканні на <label>
буде перемикатись <input>
checkbox. Це важливо, тому що далі нам потрібно приховати <input>
.
input {
position: absolute;
left: -9999px;
}
Чому не display: none
? Тому що, це призведе до ігнорування <input>
табами і браузером. Натомість цей метод залишає <input>
в потоці, але видаляє його з екрану.
Приховавши <input>
, ми можемо передати стан checkbox за допомогою <label>
! Ось тут і починається найцікавіше.
input:checked + label {
/* awesome styles */
}
Ми використовуємо комбінацію: псевдо-клас :checked
і сусідній селектор(детальніше), щоб «сказати»: "коли checkbox ввімкнено, відразу після нього знайти <label>
і застосувати "awesome styles". Ви також можете використовувати псевдоелементи (::befor
та ::after
) в <label>
для отримання більшої творчої свободи.
Давайте побачимо це в дії. Це демо використовує основну формулу, яку ми щойно обговорили, щоб перетворити звичайні checkbox в щось вражаюче.
Оберніть це в тег <form>
і воно буде працювати як і звичайні checkbox. Ми змінили відображення, але не поведінку форми.
Приховування/відображення вмісту
Поки що все це було про стилізацію <label>
, але ми можемо йти далі. Наступне демо динамічно приховує/відображає частину форми, в залежності від вибору користувача.
Псевдо-клас :checked
працює однаково, як в кнопках radio, так і в кнопках checkbox. Ось HTML код:
<input id="how-friend" name="how" type="radio">
<label class="side-label" for="how-friend">From a friend</label>
<input id="how-internet" name="how" type="radio">
<label class="side-label" for="how-internet">Somewhere on the internet</label>
<input id="how-other" name="how" type="radio">
<label class="side-label" for="how-other">Other...</label>
<div class="how-other-disclosure">
<label class="top-label" for="how-other-explain">Please explain</label>
<textarea id="how-other-explain"></textarea>
</div>
Використовуючи комбінацію ::before
(для створення зовнішнього кола) та ::after
(для створення зеленої крапки), індикатори перемикачів опиняються в <label>
.
.side-label::after {
display: none;
/* other styles */
}
input:checked + .side-label::after {
display: block;
}
<div>
схований доки перемикач кнопки 'Other…' не ввімкнений. Я сховав його з допомогою display: none
, тому що, цього разу я хочу щоб вміст ігнорувався браузером і табами, допоки він не буде відкритий.
#how-other:checked ~ .how-other-disclosure {
display: block;
}
Досі ми використовували «+»
- сусідній селектор, але тут є «~»
- споріднений селектор(детальніше). Його відмінність в тому, що він застосовує стиль до всіх зовколишніх елементів, в нашому випадку - <div>
.
Каталог файлів
Ми можемо повторно використати методи з попереднього демо, щоб створити віджет каталога файлів, що так само використовує метод показати/сховати.
HTML для одної папки виглядає так: <label>
- папка, і 2 <a>
- елементи файлів в ній.
</a><div><a>
<input id="n-1" type="checkbox">
<label for="n-1">Blue</label>
</a><div class="sub"><a>
</a><a href="#link">Mana Leak</a>
<a href="#link">Time Warp</a>
</div>
</div>
Для того щоб відобразити іконки папок(закрита/відкрита) використовується Font Awesome.
label::before, a::before {
display: block;
position: absolute;
top: 6px;
left: -25px;
font-family: 'FontAwesome';
}
label::before {
content: '\\f07b'; /* closed folder */
}
input:checked + label::before {
content: '\\f07c'; /* open folder */
}
a::before {
content: '\\f068'; /* dash */
}
Вміст в папці перемикається з допомогою спорідненого селектора.
input:checked ~ .sub {
display: block;
}
Зрозуміло що, папки можуть бути вкладеними. Це можна реалізувати просто вставивши HTML код(що вище) в <div class="'sub'">
. Щоб побачити це на прикладі, натисніть на папку «Multicolor» в демоприкладі.
Ну і нарешті, кнопка скидання.
<input type="reset" value="Collapse All">
Кнопки скидання форми використовується рідко, але тут це необхідно. Натискання на цю кнопку, повертає всі checkbox у вихідний стан, закриваючи всі відкриті папки.
Розділений список
Це демо розділяє пункти на два різних списки в залежності від вибору користувача.
Базовий HTML виглядає так:
<div class="items">
<input checked="" id="item1" type="checkbox">
<label for="item1">Create a to-do list</label>
<h2 aria-hidden="true" class="done">Done</h2>
<h2 aria-hidden="true" class="undone">Not Done</h2>
</div>
Списки автоматично формуються за допомогою CSS fexbox. Ось відповідний CSS:
.items {
display: flex;
flex-direction: column;
}
.done {
order: 1;
}
input:checked + label {
order: 2;
}
.undone {
order: 3;
}
label {
order: 4;
}
CSS flexbox дозволяє безпосередньо змінити елементи, за допомогою властивості order. При натисканні на checkbox, значення order в <label>
змінюється від 4
до 2
, переміщуючи його з "Not Done"
у "Done"
.
Підсумок
Я сподіваюсь, ви отримали безліч задоволення від демоприкладів, які я зробив. Для мене було дуже цікаво побачити, що з простих checkbox можна зробити щось дуже оригінальне! Дякую за увагу.
Ще немає коментарів