Target the parent div of a radio button when checked

Question

I created special radio buttons that are square instead of round. I'd like the border to change around them when they are selected. It's defaulted to white, but I'd like it to change to black. I'm having trouble targeting the div with class "padder".

HTML

<div class='specialRadio'>
    <div class='padder'><input class='red' type="radio" id="radio1" name="group"/><label class='' for="radio1"></label></div>
    <div class='padder'><input class='blue' type="radio" id="radio2" name="group"/><label class='' for="radio2"></label></div>
    <div class='padder'><input class='yellow' type="radio" id="radio3" name="group"/><label class='' for="radio3"></label></div>
</div>

CSS:

    .specialRadio input[type="radio"]{
        display:none;
    }

    .specialRadio input[type="radio"] + label
    {
        height: 16px;
        width: 16px; 
        display:inline-block;
        padding: 0 0 0 0px;
    }

    .padder{
        display:inline-block;
        padding: 2px;
        margin:2px; 
        border: 1px solid white;
    } 

    .red { background: red;}
    .blue  { background: blue;}
    .yellow  { background: yellow;}

This line is where I'm having problems:

.specialRadio input[type="radio"]:checked>div{  /*select all parent divs where radio button is checked*/
    border:2px solid black;
}

I know I can do the following css code, but it targets the label's border, not the parent div.

.specialRadio input[type="radio"]:checked  + label{  
    border:2px solid black;
}

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Satwik Nadkarny, Jun 13 '14 at 16:19

cohenadair · Accepted Answer · 2014-06-13T17:10:58.830

2

You can use jQuery:

$(".specialRadio input").change(function() { 
    if ($(this).is(":checked")) { 
        $(this).parent().siblings().css("border", "2px solid white");
        $(this).parent().css("border", "2px solid black"); 
    }
});

edited Jun 13 '14 at 17:10

answered Jun 13 '14 at 16:27

cohenadair

1,872
1
20
34

Good thinking, I didn't even consider using jquery. Jquery is always better than css when logic is involved. I added a line to make the other borders change back to white. '$(".specialRadio input").change(function() { if ($(this).is(":checked")){ $(this).parent().siblings().css("border", "2px solid white"); $(this).parent().css("border", "2px solid black"); } });' – user2755541 Jun 13 '14 at 17:03
Add that to your code and I'll give you the check mark. – user2755541 Jun 13 '14 at 17:03
There you go; although I think you can do $(this).css() rather than $(this).parent().siblings(), unless there are multiple radio buttons you want to change, in which case it is fine. – cohenadair Jun 13 '14 at 17:11

score 1 · Answer 2 · answered Jun 13 '14 at 16:30

Some javascript will help you do that. There is no css that can do the job. Try this:

$('.specialRadio input').on('click', function() {
  if($(this).is(':checked') {
    $(this).parent('.padder').css({ borderColor: 'black' })
  } else {
    $(this).parent('.padder').css({ borderColor: 'white' })
  }
});

I haven't tested this, but the principle is important.

Target the parent div of a radio button when checked

2 Answers2