Не получается изменить фон через :checked на css

209

13 апреля 2019, 04:30

Есть вот такой код, по идеи при нажатии на 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>

Answer 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 следует использовать знак тильда ~ вместо плюса +.

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