Главная
CSS заметки
Стилизация чекбокса

Стилизация чекбокса

Разбираем как сделать кастомный чекбокс

Кастомный чекбокс – это отличный способ добавить вашему сайту индивидуальный вид. По умолчанию браузеры предоставляют небольшой и стандартный вид чекбоксов, но с помощью CSS можно создать чекбоксы любой формы и размера.

Нам потребуется такая HTML-разметка для чекбокса:

<input type="checkbox" id="checkbox" class="checkbox">
<label for="checkbox" class="checkbox-label"></label>

С помощью атрибутов id и for мы связываем инпут с лейблом, чтобы при клике на него менялось значение чекбокса.

Далее мы скрываем нативный инпут с помощью свойства appearance: none и стилизуем label под чекбокс. А изменение стилей при выборе чекбокса будет обеспечивать псевдокласс :checked и комбинатор селекторов +.

.checkbox {
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.checkbox-label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 60px;
  height: 30px;
  border-radius: 20px;
  background: red;
}

.checkbox-label:before {
  position: absolute;
  left: 2px;
  top: 2px;
  display: block;
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  transition: .3s;
}

.checkbox:checked + .checkbox-label {
  background-color: green;
}

.checkbox:checked + .checkbox-label:before {
  left: calc(100% - 30px);
}

Получаем наш кастомный чекбокс:

Используйте этот принцип и модифицируйте стили, чтобы создать чекбоксы в соответствии с вашими потребностями. Вы можете изменять размеры, фоновые цвета, цвета границ, добавлять тени и другие эффекты. Также можете использовать изображения вместо фоновых цветов или добавлять иконки.

Допустим, вы хотите создать чекбокс с текстом “Подписаться на рассылку”. Для этого можно использовать следующий HTML-код:

<label for="checkbox" class="checkbox-label">
  <input type="checkbox" id="checkbox" class="checkbox">
  <span class="checkbox-view">
    <svg class="checkbox-icon" xmlns="http://www.w3.org/2000/svg" width="18" viewBox="0 0 511.985 511.985">
        <path fill="#fff" d="M500.088 83.681c-15.841-15.862-41.564-15.852-57.426 0L184.205 342.148 69.332 227.276c-15.862-15.862-41.574-15.862-57.436 0-15.862 15.862-15.862 41.574 0 57.436l143.585 143.585c7.926 7.926 18.319 11.899 28.713 11.899 10.394 0 20.797-3.963 28.723-11.899l287.171-287.181c15.862-15.851 15.862-41.574 0-57.435z"/>
    </svg>
  </span>
  Подписаться на рассылку
</label>

И стили:

.checkbox {
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.checkbox-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.checkbox-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  transition: .3s;
}

.checkbox-icon {
  opacity: 0;
  transition: .3s;
}

.checkbox:checked + .checkbox-view {
  background-color: green;
}

.checkbox:checked + .checkbox-view .checkbox-icon {
  opacity: 1;
}

Теперь, когда пользователь кликает по тексту, выбор чекбокса также активируется. Вы можете использовать эту технику для создания более дружественных для пользователя интерфейсов с чекбоксами.

Подписаться на рассылку

В этом примере мы добавили иконку чека c помощью встроенного svg, но вы также можете использовать любые другие иконки или изображения. Главное, чтобы вы понимали, как создавать кастомные чекбоксы с использованием CSS.

На этом мы заканчиваем статью о том, как сделать кастомный чекбокс. Вы можете экспериментировать со стилями, чтобы сделать свой чекбокс уникальным и соответствующим вашим потребностям. Удачи!

28 января 2023