html - 如果选中单选按钮，则为图像添加边框

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>