如果單選按鈕被選中，則給圖像一個邊框

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>