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>

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

1 个答案: