Border around label if radio is checked

Question

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/

This is a duplicate of a question on checkboxes; the case of radio buttons is exactly the same. — Jukka K. Korpela, Aug 28 '12 at 06:16

score 2 · Answer 1 · edited May 23 '17 at 11:55

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

edited May 23 '17 at 11:55

Community

1
1

answered Aug 27 '12 at 23:09

Bart Platak

4,387
5
27
47

Can you provide an example, please? How does a parent element acquire styles based on a child element? – Waleed Khan Aug 27 '12 at 23:11
@arxanas: Sorry, I have misread the question. I've updated my answer. Sadly this is not possible with pure CSS. – Bart Platak Aug 27 '12 at 23:14

Steve Robbins · Accepted Answer · 2012-08-27T23:29:27.490

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

+1 for this trick! Never knew about it, will come in handy at some point! :) — Bart Platak, Aug 27 '12 at 23:19

score 2 · Answer 3 · answered Aug 27 '12 at 23:45

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/

Border around label if radio is checked

3 Answers3

HTML

CSS

Linked