<div id = "a" style = "w:100px; h:100px; bg-color:black"></div>
<input type = "radio" id = "b" name = "c"/>
Нужно чтобы при действии radio:checked менялся цвет блока #a.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуТакое можно сделать, только если input
стоит перед div
. Но если вам нужно именно такое положение, то можно использовать flexbox и заменить видимое расположение:
.block {display:flex;}
.block input {order: 2;}
.block div {order: 1;}
input:checked + div {color: red}
<div class="block">
<input type="radio" name="c">
<div>Text 1</div>
</div>
<div class="block">
<input type="radio" name="c">
<div>Text 2</div>
</div>
<div class="block">
<input type="radio" name="c">
<div>Text 3</div>
</div>
Как вариант. Поиграйте со стилями, добавьте классы или id и отслеживайте с помощью css
select {
display: none;
}
input#radio_1:checked ~ #select_1{
display: block;
}
input#radio_2:checked ~ #select_2{
display: block;
}
<div id="test">
<input type="radio" name="radio" id="radio_1">
<input type="radio" name="radio" id="radio_2">
<select name="select_1" id="select_1">
<option value="optin_1">option_1</option>
</select>
<select name="select_1" id="select_2">
<option value="optin_2">option_2</option>
</select>
</div>
#b:checked ~ #a {
background-color:gray !important;
}
<input type = "radio" id = "b" name = "c"/>
<input type = "radio" id = "c" name = "c"/>
<div id = "a" style = "width:100px; height:100px; background-color:black"></div>
input
стоит доdiv