Как бы вы реализовали кастомный чекбокс?

Скрыть нативный input[type="checkbox"] визуально, оставив его доступным для скринридеров и взаимодействия с клавиатуры. Использовать внешний элемент (label или div) для создания кастомного оформления, связанного с нативным чекбоксом через атрибут for (для label) или CSS селектор :checked + selector.

.checkbox-container {
  display: inline-flex; /* Или flex/grid */
  align-items: center;
  cursor: pointer;
}

/* Скрываем нативный чекбокс */
.custom-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Видимый элемент для кастомного оформления */
.custom-checkbox-ui {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px; /* Отступ от текста */
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Оформление при наведении */
.custom-checkbox:hover + .custom-checkbox-ui {
  border-color: #007bff;
}

/* Оформление при фокусе */
.custom-checkbox:focus + .custom-checkbox-ui {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Оформление при выборе */
.custom-checkbox:checked + .custom-checkbox-ui {
  background-color: #007bff;
  border-color: #007bff;
}

/* Галочка (изображение или псевдоэлемент) */
.custom-checkbox:checked + .custom-checkbox-ui::after {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url('data:image/svg+xml;base64,...'); /* SVG иконка галочки */
  background-size: contain;
  background-repeat: no-repeat;
}

<div class="checkbox-container">
  <input type="checkbox" id="myCustomCheckbox" class="custom-checkbox">
  <label for="myCustomCheckbox" class="custom-checkbox-ui"></label>
  <label for="myCustomCheckbox">Согласен на обработку данных</label>
</div>

Альтернативные подходы:

• Создание кастомного элемента с использованием JavaScript для синхронизации состояния с невидимым нативным инпутом.
• Использование SVG для рисования чекбокса и стилизация его через CSS.

При выборе реализации важно обеспечить доступность (ARIA атрибуты, фокус, работа с клавиатуры).