如果选中单选按钮,则为图像提供边框

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>