html - HTML - 带有单选按钮的图像的 CSS

Question

我想要一张图片，下面有一个单选按钮。The image should be get into a frame whenever the radio button is selected.

我实现了这种行为，但单选按钮必须位于图像顶部，我希望将它放在图像下方。

        /* IMAGE STYLES */
        [type=radio] + img {
            cursor: pointer;
        }

        /* CHECKED STYLES */
        [type=radio]:checked + img {
            outline: 2px solid #f00;
        }

<table><tr>
<td>
<label>
        <input id="Answer" name="Answer" type="radio" value="1" />
        <img src="X.jpeg" />
</label>
</td>
<td>
<label>
        <img src="X1.jpeg" />         // here the image does not get the frame
        <input id="Answer" name="Answer" type="radio" value="2" />  
</label>
</td>
</tr>
</table>

知道哪个 CSS 可以匹配表格的第二个单元格吗？

标签： htmlcssimageradio-button

Answer 1

你可以用 jquery 来做，但如果你想使用纯 css，你可以这样做：

 [type=radio]:checked ~ .[CLASS_OF_THE_IMAGE] {
outline: 2px solid #f00;
}