Що цікавого можна зробити з checkbox

Прапорці дозволяють вибрати більше одного варіанта з запропонованих в формі. Розумно поєднуючи їх з CSS, можна отримати дивовижну річ. Ця стаття покликана продемонструвати деякі з креативних речей, що можна зробити з прапорцями. Майте на увазі, в цій статті ми не будемо використовувати JavaScript.

Основна формула

Все починається з HTML.

<input id="toggle" type="checkbox">
 <label for="toggle">

Нічого незвичного тут немає: атрибут for в <label> відповідає id в <input>, отже при натисканні на <label> буде перемикатись <input> прапорець. Це важливо, тому що далі нам потрібно приховати <input>.

input {
    position: absolute;
    left: -9999px;
}

Чому не display: none? Тому що, це призведе до ігнорування <input> табами і браузером. Натомість цей метод залишає <input> в потоці, але видаляє його з екрану.
Приховавши <input>, ми можемо передати стан прапорця з допомогою <label>! Ось тут і починається найцікавіше.

input:checked + label {
    /* awesome styles */
}

Ми використовуємо комбінацію: псевдо-клас :checked і сусідній селектор(детальніше), щоб «сказати»: “коли прапорець ввімкнено, відразу після нього знайти <label> і застосувати “awesome styles”. Ви навіть також можете використовувати псевдоелементи (::befor та ::after) в <label> для отримання більшої творчої свободи.

Давайте побачимо це в дії. Це демо використовує основну формулу, яку ми щойно обговорили, щоб перетворити звичайні прапорці в щось вражаюче.

Оберніть це в тег <form> і воно буде працювати як і звичайні прапорці. Ми змінили відображення, але не поведінку форми.

Приховування/відображення вмісту

Поки що все це було про стилізацію <label>, але ми можемо йти далі. Наступне демо динамічно приховує/відображає частину форми, в залежності від вибору користувача.

Псевдо-клас :checked працює однаково, як в кнопках radio, так і в кнопках checkbox. Ось HTML код:

<input id="how-friend" name="how" type="radio">
<label for="how-friend" class="side-label">From a friend</label>
<input id="how-internet" name="how" type="radio">
<label for="how-internet" class="side-label">Somewhere on the internet</label>
<input id="how-other" name="how" type="radio">
<label for="how-other" class="side-label">Other...</label>
<div class="how-other-disclosure">
    <label for="how-other-explain" class="top-label">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> - елементи файлів в ній.

<div>
    <input id="n-1" type="checkbox">
    <label for="n-1">Blue</label>
    <div class="sub">
        <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">

Кнопки скидання форми використовується рідко, але тут це необхідно. Натискання на цю кнопку, повертає всі прапорці у вихідний стан, закриваючи всі відкриті папки.

Розділений список

Це демо розділяє пункти на два різних списки в залежності від вибору користувача.

Базовий HTML виглядає так:

<div class="items">
    <input id="item1" type="checkbox" checked>
    <label for="item1">Create a to-do list</label>
    <!-- more items -->
    <h2 class="done" aria-hidden="true">Done</h2>
    <h2 class="undone" aria-hidden="true">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. При натисканні на прапорець, значення order в <label> змінюється від 4 до 2, переміщуючи його з “Not Done” у “Done”.

Підсумок

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