Сверстать кастомный чекбокс можно с использованием HTML-элемента <label> и скрытого элемента <input type="checkbox">.

Для создания кастомного внешнего вида чекбокса можно использовать CSS-стили.

Семантически верный способ сверстать кастомный чекбокс состоит в следующих шагах:

1. Создать элемент <label> с атрибутом for, который указывает на id связанного с ним элемента <input type="checkbox">. Например:

<label for="my-checkbox">Мой кастомный чекбокс</label>
<input type="checkbox" id="my-checkbox" />

2. Скрыть стандартный чекбокс с помощью CSS-стилей. Например:

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

3. Создать элемент, который будет заменять стандартный чекбокс, например, <span>. Например:

<label for="my-checkbox">
  <span class="checkbox"></span>
  Мой кастомный чекбокс
</label>
<input type="checkbox" id="my-checkbox" />

4. Оформить элемент <span> с помощью CSS-стилей, чтобы создать желаемый внешний вид кастомного чекбокса. Например:

.checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
}

5. Создать стили для состояний чекбокса - нажатого и выбранного. Например:

input[type="checkbox"]:checked + label .checkbox {
  background-color: #007bff;
  border: 1px solid #007bff;
}

6. Добавить возможность переключения состояния чекбокса при клике на кастомный элемент. Например:

input[type="checkbox"]:checked + label .checkbox:after {
  content: url("checkmark.svg");
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

В итоге получится кастомный чекбокс с семантически верной структурой HTML и правильным поведением при клике и выборе.

Назад