如何在单选按钮单击时显示 CSS 边框

Question

我想在单击单选按钮时在单选按钮旁边的图像周围显示一个边框。目前，我的 CSS 选择器知识不足，我没有得到预期的结果。

我的期望是当我点击一个单选按钮时，相应的图像应该突出显示，但它不是...

怎么了？

label>img ~ .input:checked  {
 border: 2px solid #f00;
}

<table>
<tr>
<td><label>

    <img src="http://bighappyface.com/Happy%20Face%2050x50.png"><br />
 <input type="radio" name="page" value="original" />Original </label>
</td>
<td><label>
    <img src="http://bighappyface.com/Happy%20Face%2050x50.png"><br />
 <input type="radio" name="page" value="standard" checked="checked">Standard
</label></td>
</tr>
</table>

编辑

到目前为止的答案重新排列了 HTML 个元素，从设计的角度来看，这是不可取的。我更喜欢把文字放在图片的底部，而不是上面。如果有保持 html 元素顺序的答案，我会重新接受...

Answer 1

您需要使用 input 而不是 .input，因为点地址是 class 而您没有指定 class。此外，:checked 伪 class 需要写在要更改的元素之前。兄弟选择器 ~ 理论上应该可以工作，但我不得不重新安排 html 元素。使用 Chrome、Opera 和 Firefox 进行测试。

input:checked ~ img  {
 border: 2px solid #f00;
}

<table>
<tr>
<td>
    <label>
        <input type="radio" name="page" value="original" /> Original<br />
        <img src="http://bighappyface.com/Happy%20Face%2050x50.png">
    </label>
</td>
<td>
    <label>
        <input type="radio" name="page" value="standard" checked="checked"> Standard<br />
        <img src="http://bighappyface.com/Happy%20Face%2050x50.png">
    </label>
</td>
</tr>
</table>

Answer 2

fiddle link

http://jsfiddle.net/abasnet/0535aymy/

input[type="radio"]:checked + img {
    border: 2px solid #f00;
}



<table>
<tr>
    <td>
        <input type="radio" name="page" value="original" />Original
        <img src="http://idzyanamohddahlan.files.wordpress.com/2011/02/2472566_f520.jpg">
    </td>
    <td>
        <input type="radio" name="page" value="standard" checked="checked">Standard
        <img src="http://idzyanamohddahlan.files.wordpress.com/2011/02/2472566_f520.jpg">
    </td>
</tr>

Answer 3

这是满足您需求的解决方案：

Live Demo

input:checked ~ img  {
    border: 2px solid #f00;

}

label, img {
    position: relative;
    top: -80px;
}

label, input[type=radio] {

  top: 60px;  
}

HTML :

<table>
<tr>
<td>
    <label>
        <input type="radio" name="page" value="original" /> Original<br />
        <img src="http://bighappyface.com/Happy%20Face%2050x50.png">
    </label>
</td>
<td>
    <label>
        <input type="radio" name="page" value="standard" checked="checked"> Standard<br />
        <img src="http://bighappyface.com/Happy%20Face%2050x50.png">
    </label>
</td>
</tr>
</table>

如何在单选按钮单击时显示 CSS 边框

How to make CSS border show on radio button click

html

css

css-selectors