Можно ли только с помощью CSS изменять состояние checkbox?

Question

[Alex]

Недавно познакомился с вот таким способом изменения состояния документа



Но при таком подходе использовать <label> не очень удобно. <label> должен вести себя как кнопка. Отсюда и мой вопрос:
Есть способ использовать вместо <label><button>, чтобы по клику переключался <input type="checkbox"> но только без использования javascript?

Comments

[Сергей Сергей]

.btn:active{
  background: #f5f;
}

ну и прочие :hover

[Alex]

Сергей Сергей, Тут вопрос не в стилизации, а в доступности. Браузер, читалки, скринридеры, и прочие должны понимать, что это не просто текст к переключателю, а работать с элементом как с кнопкой

[Rustam Bainazarov]

На apple.com так сделана кнопка мобильного меню:
https://www.apple.com

[Alex]

Рустам Байназаров, Без javascript меню не открывается.

[Rustam Bainazarov]

Александр Козак, там состояния анимаций на них. Сама идея такая же.

[4tlen]

Александр Козак, jsfiddle, jsfiddle 2

Answer 1

[Andrej Sharapov]

Если я правильно вас понял, то здесь гамбургер, который открывает меню по клику, работает на чекбоксе. Работает без js. Проанализируйте работу кода.

Comments

[Alex]

В том то и проблема. Даже в вашем примере нет возможности открыть меню с клавиатуры.

Даже если для кнопки добавить tabindex="0"

[profesor08]

Александр Козак, навигация табами возможно по элементам формы, иначе отслеживай на js, и css тут не причем.

Answer 2

[profesor08]

Нет, нельзя. CSS про стили, а не про взаимодействие. Ты можешь только отследить состояние чекбокса.

Answer 3

[relows]

В этом тебе сможет помочь только js