У чекбокса нужен особый вид, но переключение с клавиатуры, фокус и участие в форме хочется сохранить. Для этого внутри компонента можно оставить настоящий
input.В примере Энди Белла поле лежит в
label, занимает всю площадь своей обёртки и получает appearance: none. Рядом находится SVG-галочка, скрытая от вспомогательных технологий через aria-hidden.Состояние по-прежнему хранит браузер. Селектор
input:checked + svg показывает галочку, а :has(input:checked) меняет фон обёртки. Само поле остаётся доступным для фокуса.Размеры заданы в
em, поэтому компонент масштабируется вместе со шрифтом. Для радиокнопок автор показывает тот же подход с другим индикатором. В статье есть живые примеры и полный CSS.