How to make CSS border show on radio button click - html

Question

I want to have a border show up around the image next to the radio button, when that radio button is clicked. Currently, my CSS selector knowledge is lacking and I do not get the expected result.
My expectation is that when I click a radio button , the corresponding image should be highlighted, but it is not...
What is wrong?
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>
EDIT
Answers so far rearrange HTML elements, which is not desirable from design point of view. I prefer to keep the text at the bottom of the image, not above. I'll re-accept if there is an answer that keeps html elements in order ...

Answer 1

here is a solution who sweets your needs :
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>

Answer 2

You need to use input instead of .input because the dot addresses a class and you have not specified a class. Additionally, the :checked pseudo-class needs to be written before the element you want to change. The sibling selector ~ should work in theory but I had to re-arrange the html elements. Tested using Chrome, Opera and 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 3

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>