Сверстать кастомный чекбокс можно с использованием 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 и правильным поведением при клике и выборе.

Назад