/
Блог Хекслета
/
Дневник студента
/

Кастомный чекбокс с ~ и :checked

Кастомный чекбокс с ~ и :checked

6 августа 2021 г.
1 минута
4
Кастомный чекбокс с ~ и :checked

Когда я только начинал изучать веб-разработку, для меня совсем неочевидным было, как сделать кастомные чекбоксы, потому что просто так стилизовать мы их не можем.

Поэтому хочу рассказать, как это работает. Вот пример конечного результата:

enter image description here


Подготовительный этап:

Поскольку я не знаю уровень владения HTML и CSS у читателя статьи, я посчитал нужным упомянуть 3 момента:

  1. Селектор элемент1~элемент2 (пример: div~p) выберет все элементы p, находящиеся в коде за элементом div

  2. Label и input можно связывать друг с другом, чтобы input[type='checkbox'] реагировал на нажатие на label. Если input находится внутри label, то он будет менять свое состояние при клике на label (становиться

    и наоборот). Подробнее об этом вот здесь.

  3. Вид в отжатом/нажатом состоянии будет менять div с классом .custom-check-icon


Алгоритм:

Шаг 1

Сначала создадим верстку без стилей: у нас будет div-обертка, а внутри checkbox и нужный нам текст. Добавим стилей чтобы выровнять все правильным образом:

HTML:

Жанры

CSS:

label { display: flex; align-items: center; }

Результат:

enter image description here


Шаг 2

Кастомизируем конечный вид чекбокса с помощью псевдоэлемента ::before:

CSS:

.custom-check-icon { position: relative; width: 18px; height: 18px; border: 1px solid #50514f; margin-right: 8px; } .custom-check-icon::before { content: ""; position: absolute; width: 8px; height: 8px; background-color: #9b7ede; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Результат:

enter image description here


Шаг 3

Теперь сделаем таким образом, чтобы наш маленький фиолетовый квадратик отображался только в том случае, когда наш input:checked:

CSS:

.custom-check-icon::before { content: ""; position: absolute; display: none; width: 8px; height: 8px; background-color: #9b7ede; top: 50%; left: 50%; transform: translate(-50%, -50%); } label input:checked ~ .custom-check-icon::before { display: block; }

Результат:

enter image description here


Шаг 4

Все что нам остается — скрыть наш input:

CSS:

label input { display: none; }

Конечный результат:

enter image description here


Итог

Вот таким образом можно сделать кастомный чекбокс. Хочу отметить, что это всего лишь один из вариантов, они могут: отличаться, например, input может быть не внутри label, а рядом, а также вместо псевдоэлемента ::before можно использовать background-image (именно так можно сделать чекбокс с превьюшки поста)

Александр Ковалец

4 года назад

4