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

5 хв. читання

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 можна зробити щось дуже оригінальне! Дякую за увагу.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація