дать изображение границы, если радиокнопка отмечена

Question

Я хочу дать изображение границы, если установлен переключатель.

Это HTML синтаксис:

<div class="frm_radio"> 
    <label for="field_n9r1a2-0"> 
    <input type="radio" name="x" id="t" value="Betreuung"> 
    Betreuung 
    <img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg"> 
    </label> 
</div> 

Я попробовать с селектором CSS :checked но он не работает.

input[type=radio]:checked img { 
    border: 2px solid red; 
} 

Может кто-нибудь объяснить, как я могу это решить?

Answer 1

Вам нужно добавить оператор ~ (родственный):

input[type=radio]:checked ~ img { 
    border: 2px solid red; 
} 

без ~ он рассматривает, как radio кнопка является родителем img. Если бы у вас не было текста, я бы предложил +.

input[type=radio]:checked ~ img { 
 
    border: 2px solid red; 
 
}

<div class="frm_radio"> 
 
    <label for="field_n9r1a2-0"> 
 
    <input type="radio" name="x" id="t" value="Betreuung"> 
 
    Betreuung 
 
    <img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg"> 
 
    </label> 
 
</div>