Радио в виде кнопки не активна после нажатия?

Question

[vasika778]

Подскажите, почему после нажатия кнопка не меняет цвет и не подсвечивается?

<div class="form_radio_btn">
<label for="radio-1">Radio button 1
	<input id="radio-1" type="radio" name="radio" value="1" checked>
	</label>
</div>

.form_radio_btn {
	display: inline-block;
	margin-right: 10px;
}
.form_radio_btn input[type=radio] {
	display: none;
}
.form_radio_btn label {
	display: inline-block;
	cursor: pointer;
	padding: 0px 15px;
	line-height: 34px;
	border: 1px solid #999;
	border-radius: 6px;
	user-select: none;
}
 
/* Checked */
.form_radio_btn input[type=radio]:checked + label {
	background: #ffe0a6;
}
 
/* Hover */
.form_radio_btn label:hover {
	color: #666;
}

Comments

[Ankhena]

Потому что вот это .form_radio_btn input[type=radio]:checked + label значит, что нужно применить стили к label, который лежит сразу после чекнутого инпут с типом радио, находящегося внутри .form_radio_btn

Но такого лейбла нет.
У вас лейбл снаружи инпута.
Уже немножко есть :has, если устраивает его поддержка.

[vasika778]

Ankhena, не совсем понял как его применить? :has

[Ankhena]

vasika778, так и применить, к лейблу, если внутри чекнутый инпут.

[vasika778]

.form_radio_btn input[type=radio]:checked label:has

так что ли? или я что-то не понял?

[vasika778]

вот код https://jsfiddle.net/2rd9xaz0/1/

[Сергей delphinpro]

vasika778, когда не понимаешь можно документацию почитать https://developer.mozilla.org/en-US/docs/Web/CSS/:has или статью в интернете https://habr.com/ru/post/662355/

/* label который содержит в себе чекнутый инпут */
label:has(input:checked) {

}

[vasika778]

Сергей delphinpro, спасибо сработало! :)