There is such a code, according to the idea when you click on the radio button, the backround color of the div `a should, but for some reason this does not happen. It seems simple, but not clear. I would be grateful for the help!

.test{ height:100px; width:100px; background: #000; } .check-game-blue:checked + .test{ background: blue; } .check-game-red:checked + .test{ background: red; } 
 <label class="drop"><input type="radio" name="check-game" class="check-game-blue" checked>Синий</label> <label class="drop"><input type="radio" name="check-game" class="check-game-red">Красный</label> <div class="test"></div>

  • .check-game-red: checked ~ .test {background: red; } - Arendach 1:08
  • try the tilde ~ sign instead of + - Arendach
  • @Arendach, tried it this way, but it doesn't work. - Slam Streetwear 1:09
  • one
    Neither ~ nor + will work, because input is inside a label. In order to work it is necessary that the elements were at the same level. What actually @Arendach demonstrated in its response - Rogatnev Nikita

1 answer 1

Take out the input from the label tag and link them by id

That is, add a for attribute to the label tag to make it <label for="input_id">...</label>

Tag input add id attribute to get <input id="input_id" ...>

 <label for="blue" class="drop">Синий</label> <input id="blue" type="radio" name="check-game" class="check-game-blue" checked> <label for="red" class="drop">Красный</label> <input id="red" type="radio" name="check-game" class="check-game-red"> <div class="test"></div>

In css , you should use a tilde ~ instead of plus sign + .

You can read about the difference here.