0

Есть вот такой код, по идеи при нажатии на radio кнопку должен backround цвет div`a, но этого почему-то не происходит. Вроде все просто, но не понятно. Буду благодарен за помощь!

.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>

4
  • .check-game-red:checked ~ .test{ background: red; }
    – Arendach
    12 ноя 2018 в 13:08
  • попробуйте знак тильда ~ вместо +
    – Arendach
    12 ноя 2018 в 13:08
  • @Arendach , пробовал и так, но не работает.
    – Slam
    12 ноя 2018 в 13:09
  • 1
    Ни ~ ни + не сработают, поскольку input находится внутри label. Для того чтобы сработало нужно чтобы элементы были на одном уровне. Что собственно @Arendach и продемонстрировал в своем ответе 12 ноя 2018 в 14:07

1 ответ 1

1

Вынесите input с тэга label и свяжите их по идентификатору

То есть тэгу label добавьте атрибут for чтобы получилось <label for="input_id">...</label>

Тэгу input добавьте атрибут id чтобы получилось <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>

В css следует использовать знак тильда ~ вместо плюса +.

Про разницу их можно прочитать здесь

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.