ラジオボタンがチェックされている場合、画像にボーダーを付けます。

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

あなたは~（兄弟）オペレータを追加する必要があります。それはimgの親でradioボタンとして扱います~なければ

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

を。テキストがない場合は、+を提案していました。私の場合は

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>