Нужно изменить div при radio:checked

475

13 января 2017, 09:53

<div id = "a" style = "w:100px; h:100px; bg-color:black"></div>
<input type = "radio" id = "b" name = "c"/>

Нужно чтобы при действии radio:checked менялся цвет блока #a.

Answer 1

Такое можно сделать, только если 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>