add background color to a div when radio button is checked using css

Question

I have a radio button and I need to add a style to its parent div when the radio button is checked. This I need to do only with css. In the below html, if the radio is checked, i need to apply a color to the div "options"

HTML

<div class="options"> 
<span class="option_radio">
        <input type="radio" name="payMethod" id="payMethod1" value="aaa" >
</span>
<span class="option_image">
    <label for="payMethod1">
        <img src="abc.png" >
    </label>
</span>
</div>

I tried the below approaches but its not coming correctly

.options input[type="radio"]:checked span{
background-color:black;
}

.options input[type="radio"]:checked div.options{
background-color:black;
}

could somebody please help me on this

That won't work as you try to, since this would mean you alter the rules for a `span` or `div` that is located _inside_ a radio button... — arkascha, Apr 23 '14 at 13:09
You can't target parents in css http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Seth, Apr 23 '14 at 13:10

score 0 · Answer 1 · answered Apr 23 '14 at 13:10

Sorry, can't do that yet. You can only go down the tree, not up it. You will either need to make the elements you want to style siblings or descendents of the radio button. Ancestor selectors do not yet exist:

http://css-tricks.com/parent-selectors-in-css/

score 0 · Answer 2 · answered Apr 23 '14 at 13:17

0

<input type="radio" name="payMethod" id="payMethod1" value="aaa" />

<div class="options"> 
<span class="option_radio">
</span>
<span class="option_image">
    <label for="payMethod1">
        <img src="abc.png" />
    </label>
</span>
</div>

css

input[type='radio']:checked + div.options {
  background-color:green;
}
input[type='radio']:checked + div.options span {
  background-color:red;
}

answered Apr 23 '14 at 13:17

alessandrio

4,282
2
29
40

@avril..This doesn't work.I need to style the parent div of the selected radio button – user1049057 Apr 23 '14 at 13:22
use `if` `else` with JavaScript or jquery, only css doesn't work. – alessandrio Apr 23 '14 at 13:39

score 0 · Answer 3 · answered Apr 23 '14 at 13:24

0

That would require using parent selectors from CSS4 http://www.w3.org/TR/selectors4/ Unfortunately CSS4 is not yet available. So for today it is not possible to do that using pure css.

answered Apr 23 '14 at 13:24

Tirlipirli

103
2
10

score 0 · Answer 4 · answered Apr 23 '14 at 13:48

Javascript is your answer. Provided Vanilla and jQuery examples.

var payMethod = document.querySelector('#payMethod1');

payMethod.onchange = function() {
    alert('clicked')
    // Get span and div
    if(this.checked) {
        var elements = document.querySelectorAll('.option_radio, .options');

        // Loop elements & add class
        for(var i = 0; i < elements.length; i++) {
            if (elements[i].classList)
              elements[i].classList.add("checked");
            else
              elements[i].className += ' checked';
        }
    }
};

//jQuery implementation
$('#payMethod1').change(function() {
   if($(this).is(':checked')) {
       $('.option_radio, .options').addClass('checked');
   }
});

add background color to a div when radio button is checked using css

4 Answers4