Как сделать кастомный чек-бокс доступным с клавиатуры?

Question

[sammyKj]

всем привет, как сделать проставление чек-бокса с помощью клавиатуры, возможно с помощью js? сейчас чек-бокс кликабелен только при помощи мыши
скорее всего проблема в tabindex -1, но мне также нужно, чтобы по табу чек бокс попадал в фокус и достичь получилось именно таким способом, но проставить чек теперь не получается с клавы
https://codepen.io/SamanthaKJ/pen/abqVdaN

Answer 1

[Сергей delphinpro]

Скрыть системный чекбокс классом visually-hidden. Tabindex не трогать и не менять. При этом он останется доступным для клавиатуры.
Стилизовать видимую часть на основе псевдоклассов системного чека.

input[type=chekbox]:focus + span {
  // визуализация фокусного состояния для видимого индикатора
}
input[type=chekbox]:checked + span {
  // визуализация отмеченного состояния для видимого индикатора
}

Comments

[Антон Антон]

может лучше в лабел обернуть?

[Сергей delphinpro]

Антон Антон, не принципиально. Можно обернуть, можно лэйбл и рядом поставить, связав по айди.

[Антон Антон]

Сергей delphinpro, ну просто тут предполагается span дополнительный. а можно сделать через обертывание и :focus-within