Генератор CSS-чекбоксов

Что делает сгенерированный CSS

Правило применяется напрямую к элементу input с помощью appearance: none, которое убирает стандартный вид, чтобы квадрат можно было оформить:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Когда чекбокс отмечен, квадрат заполняется выбранным цветом и появляется белая галочка, нарисованная средствами CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Почему нативный элемент input

Стиль никогда не заменяет элемент на div: настоящий <input type="checkbox"> сохраняет активацию с клавиатуры, поддержку экранных дикторов и отправку формы. appearance: none меняет только внешний вид. Если нужно поддерживать старые версии Safari, добавьте к правилу -webkit-appearance: none.

Фокус и наведение

Сгенерированное правило включает плавный переход цвета, но не содержит стилей наведения и фокуса. Добавьте свои правила для :hover и :focus-visible, чтобы пользователи клавиатуры всегда видели, где находится фокус, например цветной контур вокруг квадрата.

Галочка

Галочка это небольшая белая линия, повёрнутая на 45 градусов. Если нужен другой цвет или линия тоньше или толще, отредактируйте значения border и border-width в правиле ::after.