0

I would like to have an image with a radio button under it. The image should be get into a frame whenever the radio button is selected.

I achieved that behaviour but with the radio button must be on top of the image, and I would like to have it under the image.

        /* 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>

Any idea which CSS would match for the second cell of the table?

YaKs
  • 143
  • 12

1 Answers1

0

you can do it with jquery but if you want to use pure css you can do something like this:

 [type=radio]:checked ~ .[CLASS_OF_THE_IMAGE] {
outline: 2px solid #f00;
}
Paria Sabet
  • 109
  • 4