Трипозиційний checkbox (aka tristate) без скриптів і смс

Знадобилося мені нещодавно реалізувати трипозиційний перемикач. Ну це такий, у якого замість двох станів «включено/вимкнено», є ще проміжний стан. Це часто використовується, наприклад, в чекбоксі «вибрати все», для того щоб показати, що обрані не всі елементи, а тільки частину. Загалом, захотілося таке реалізувати, та щоб без скриптів.

Приклад елемента на gmail:



Побіжне гугление не видало мені готового рішення без JavaScript. Точніше, я знайшов парочку, але вони пропонували для зміни стану кликати в конкретне місце на перемикачі, що зовсім незручно. Хоча в основному пропонують використовувати або властивість DOM
indeterminate
у чекбокса, або написання компоненту на скриптах, починаючи з jQuery, закінчуючи Angular. Але мені якось не хотілося заради такої простої задачі підключати JS взагалі.

Ще з побажань — мені хотілося мати робочий клікабельний
label
, а так як стану три, то щоб цей
label
показував поточний стан.

Як я це реалізував? В основі — звичайні радіо-инпуты спозиционированые абсолютно у верхній лівий кут. А вся магія полягає в зміні
z-index
в залежності від вибраного елемента. Шматочок з CSS:
.tristate > input[type="галичина"]:checked + input[type="галичина"] {
z-index: 10;
}

Іконка і поточний лейбл стилізується такими правилами:
.tristate > input[type="галичина"]:checked + i + label,
.tristate > input[type="галичина"]:checked + i + label + label {
display: none;
}

.tristate-checkbox > input[type="галичина"]:checked + input[type="галичина"] + i {
/* ... */
}

Залишилося все трохи застилизовать, і отримуємо два симпатичних UI-компоненти, як на картинці до посту:

Демо на CodePen

Працездатність перевіряв в FF, Chrome, IE9+.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.