Border around label if radio is checked [duplicate] - html

Question

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Highlight label if checkbox is checked (html/css)
I would like label to get a red border if radio is checked.
Code so far:
HTML:
<center style="margin-top:20px;">
<label class="big">
This is a box 1
<input name="radio-group1" type="radio" />
</label>
<br/>
<label class="big">
This is a box 2
<input name="radio-group1" type="radio" class='sex' />
</label>
</center>
CSS:
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
}
.big:hover {
border:1px solid blue;
}
No JS solutions please. I have been trying with sibling and children selectors but unsuccesfuly.
JSFIDDLE: http://jsfiddle.net/QqVCu/10/

Answer 1

You would have to rearrange the HTML so the label/red-border-element comes after the radio.
HTML
<center style="margin-top:20px;">
<div class="big">
<input id="box1" name="radio-group1" type="radio" />
<label for="box1">This is a box 1</label>
</div >
<br/>
<div class="big">
<input id="box2" name="radio-group1" type="radio" />
<label for="box2">This is a box 2</label>
</div >
</center>
CSS
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
position: relative;
}
.big:hover {
border:1px solid blue;
}
label {
width: 100%;
height: 100%;
display: block;
}
input[type="radio"] {
position: absolute;
top: 20px;
left: 50%;
}
input[type="radio"]:checked + label {
border: red 1px solid;
}
​
http://jsfiddle.net/QqVCu/12/
But it starts getting weird. A little javascript wouldn't hurt.
edit: this version is a little cleaner

Answer 2

You can use :checked selector, but this will only work for the checkbox itself. Otherwise there is no way to do it in pure CSS - you will have to resort to JavaScript (which I do realize you said you wanted to avoid - but pure CSS won't do it).

Answer 3

What you are trying is not possible with current structure of your html. There is no such thing as a parent selector. There is a sibling selector though, wich could be used to accomplish what you are after. First you would have to restructure your html to something like this:
<div>
<input name="radio-group1" id="box1" type="radio" />
<label class="big" for="box1">
This is a box 1</label>
</div>
<div >
<input name="radio-group1" id="box2" type="radio" class='sex' />
<label class="big" for="box2" >
This is a box 2</label>
</div>
I made label and input siblings in stead of parent/child. They will still work the same thanks to their id and for attributes. I also changed their order to be able to use the next sibling selector. The extra div is required to do some absolute positioning to put them back in the same order you had in your fiddle.
Next i added a few lines of css. The real magic happens here:
div input:checked+label {
border: 1px solid red;
}
This will selected all 'next sibling' of an input that is checked and has a div as a parent. You could further finetune this to only work on radio's and in reality i would add a class to the wrapper div, but this is just a 'proof of concept'.
The rest of the css i added is just some positioning to mimic the layout you had in your example. This will also need some finetuning.
The working example is here: http://jsfiddle.net/QqVCu/14/