✅ Свой чекбокс, который не ломает фокус

Родной чекбокс в CSS почти не настраивается: по сути, только цвет через accent-color. Псевдоэлемент ::checkmark уже есть в спецификации, но, по словам автора, браузеры над ним пока не работают.

Приём простой: настоящий не прячут, а кладут внутрь span с рамкой, снимают родной вид и растягивают поверх коробки:

.checkbox input {
margin: 0;
width: 100%;
height: 100%;
appearance: none;
position: absolute;
top: 0;
left: 0;
border-radius: 0.2em;
}

Его не видно, но он по-прежнему получает фокус и рисует кольцо фокуса. Галочка — отдельная SVG рядом, появляется по селектору input:checked + svg.

Оговорка: для промежуточного состояния нужна ещё одна SVG, которую переключают.

Тот же код подходит для радиокнопок и масштабируется одним font-size.

👉 @seniorFront