CODEWITHSUNDEEP
htmlcsscss-selectors
Dennis
Dennis

Reputation: 8101

How to make CSS border show on radio button click

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 ...

Upvotes: 1

Views: 1445

Answers (3)

ZEE
ZEE

Reputation: 5849

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>

Upvotes: 1

ByteHamster
ByteHamster

Reputation: 4951

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>

Upvotes: 1

a basnet
a basnet

Reputation: 17

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>

Upvotes: 0

Related Questions