Можно ли подружить checkbox + button?

Question

[Анатолий]

Можно ли сделать, чтобы с помощью чекбокса менять кнопки местами?
К примеру, заменить кнопку "play" на "pause", зависимости от состояния чекбокса.

Стили CSS писать не обязательно. Нужно подсказать, почему не чекается при клике на кнопку, и можно ли это победить.

PS. Как сделать с JS знаю.

Пример на codepen.io

Answer 1

[Александр]

Использовать onchange, проверять:
Если checked возвращает true, прописывать движение через style
Если false прописывать другое движение
Кнопкам не забудь transition задать что бы плавно перемещались

Comments

[Анатолий]

это js? с js я знаю как сделать

[Александр]

Анатолий, у css то же есть свойство checked

.checkbox:checked ~ .button1{
left: 0px;
}
.checkbox:checked ~ .button2  {
left: 100px;
}
.checkbox ~ .button1{
left: 100px;
}
.checkbox ~ .button2  {
left: 0px;
}

Я, правда не совсем помню как обращаться к соседнему элементу, через ~ или просто через пробел

[Анатолий]

У меня проблема не в стилях, у меня проблема в том, что checkbox не переключается, при нажатии на кнопку.

[Александр]

Анатолий, Если вы хотите при нажатии на кнопку задавать chekced у input, то, как я знаю, на css это невозможно

[Анатолий]

Ясно

Answer 2

[tema_sun]

Если возможно отказаться от тега button, то возможен такой вариант:
https://codepen.io/anon/pen/oJgRza

С button это по идее работать не будет, т.к.

Разрешенный контент
Текстовый контент, но без вложенных элементов label. Недопустимы другие оборачиваемые в label элементы помимо целевого.

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Answer 3

[Илья]

Вариант решения на чистом CSS:
https://codepen.io/anon/pen/NePEZO

Comments

[Анатолий]

У меня почему-то не работает.

[riot26]

Анатолий, потому что в вопросе было о замене кнопки по чекбоксу, а не наоборот

[Анатолий]

Стили CSS писать не обязательно. Нужно подсказать, почему не чекается при клике на кнопку, и можно ли это победить.

[Илья]

Анатолий, Вы не смогли сформулировать вопрос. Поэтому не сразу получили нужный ответ.

Answer 4

[nvdfxx]

codepen

Comments

[Анатолий]

кнопка не кликается, всмысле чекбокс не реагирует

[riot26]

Анатолий, та же фигня что в предыдущем ответе. Неправильно поставлен вопрос

[Анатолий]

"почему не чекается при клике на кнопку"
Как это можно написать по другому? Кликаем на кнопку, checkbox не переходит в checked? :)

[nvdfxx]

никак нельзя, нет псевокласса для клика