Как применить css если чекбокс нажат?

Question

[Антон]

Есть чекбокс #start
Как если он нажат применить к #video margin-left:150px;?
На css не получается, видимо потому, что в разных местах чекбокс и video на странице.
Как на js сделать? Соответственно снятие флажка должно убрать cssстиль обратно

#start:checked ~ #video {margin-left:150px !important;}

Answer 1

[iBird Rose]

например так https://jsfiddle.net/owg60r9v/3/

Answer 2

[Кирилл Киселев]

Прописываешь правило для класса margin, в котором будет левый отступ, при нажатии добавляется этот класс к элементу, при снятии галочки - убирается.

var input = document.getElementById('start');
var video = document.getElementById('video');

input.onclick = function() {
  if (this.checked) {
    video.classList.add('margin');
  } else {
    video.classList.remove('margin')
  }
}

Answer 3

[неДоктор Стрэндж]

не знаю,какие там у тебя "полевые условия",но,возможно,подойдет такое https://codepen.io/pesockiy/pen/bKYadR решение твоей проблемы,которой ты меня озадачил.
эксперименты с селекторами,без js.
единственный (пока) момент - чекбокс должен быть выше по дереву и сзади элемента,к которому необходимо прописать правила