html - 如何在单击单选按钮时显示 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 元素，从设计的 Angular 来看，这是不可取的。我更喜欢把文字放在图片的底部，而不是上面。如果有保持 html 元素有序的答案，我会重新接受...

Answer 1

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

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>