Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Дневник студента

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

Время чтения статьи ~2 минуты
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Кастомный чекбокс с ~ и :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 (становиться :checked и наоборот). Подробнее об этом вот здесь.

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 (именно так можно сделать чекбокс с превьюшки поста)

Аватар пользователя Александр Ковалец
Александр Ковалец 06 августа 2021
3
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 28 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 28 марта
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время