Changing background color with CSS on radio button input when :checked

Question

Problem

Trying to change the background color of a radio input that's been styled like a button so that when the user clicks on it, the color will change from grey to yellow.

Code snippet

  /*---------------------------------- SIDEBAR ----------------------------------*/ input[type=radio], input[type=checkbox] { display: none; } form input[type="radio"]:checked + label { background-color: yellow; } label { display: block; appearance: button; -webkit-appearance: button; -moz-appearance: button; -ms-appearance: button; font-family: 'Roboto', sans-serif; font-weight: 400; background: #DDDDDD; font-size: 1.6rem; color: #111111; border: 2px solid #AAAAAA; padding: 8px; width: 40%; margin: 0 auto; text-align: center; &: hover { cursor: pointer; } &: checked { background-color: $yellow; } } 

 <form> <label for=""> <input type="radio" class="button" id="Male" name="gender">Male</input> </label> <label for=""> <input type="radio" class="button" id="Female" name="gender">Female</input> </label> </form> 

Answer 1

There are two ways you can go about this. One would be a pure CSS solution. You should go for this if you have control over the HTML structure :

SOLUTION 1 :CSS Solution

Just modify your HTML as follows :

<form>
  <input type="radio" class="button" id="Male" name="gender"></input>
  <label for="Male">Male</label>
  <input type="radio" class="button" id="Female" name="gender"></input>
  <label for="Female">Female</label>
</form>

Keeping the same CSS :

/*----------------------------------
        SIDEBAR
        ----------------------------------*/
 input[type=radio],
 input[type=checkbox] {
   display: none;
 }
 form input[type="radio"]:checked + label {
   background-color: yellow;
 }
 label {
   display: block;
   appearance: button;
   -webkit-appearance: button;
   -moz-appearance: button;
   -ms-appearance: button;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
   background: #DDDDDD;
   font-size: 1.6rem;
   color: #111111;
   border: 2px solid #AAAAAA;
   padding: 8px;
   width: 40%;
   margin: 0 auto;
   text-align: center;
}

You can see this here -> http://jsfiddle.net/4pf9cds3/

---

SOLUTION 2 : jQuery Solution

You can use this solution if you have no control over the HTML, say your HTML is being provided by a third-party (though I doubt this is the case) :

HTML :

<form>
    <label for="Male">
        <input type="radio" class="button" id="Male" name="gender" >Male</input>
    </label>
    <label for="Female">
        <input type="radio" class="button" id="Female" name="gender">Female</input>
    </label>
</form>

jQuery :

$(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('yellowBackground');
        $(this).addClass('yellowBackground');
    });
});

CSS :

 /*----------------------------------
    SIDEBAR
    ----------------------------------*/
input[type=radio], input[type=checkbox] {
    display: none;
}

label {
    display: block;
    appearance: button;
    -webkit-appearance: button;
    -moz-appearance: button;
    -ms-appearance: button;
    font-family:'Roboto', sans-serif;
    font-weight: 400;
    background: #DDDDDD;
    font-size: 1.6rem;
    color: #111111;
    border: 2px solid #AAAAAA;
    padding: 8px;
    width: 40%;
    margin: 0 auto;
    text-align: center;
    transition: all 0.7s ease-in-out;
}

.yellowBackground {
    background-color:yellow;
}

You can see this here -> http://jsfiddle.net/rmd1fa1x/

Hope this helps!!!

Answer 2

 $(document).ready(function(){ $("input:radio").click(function(){ if ($(this).is(":checked")){ $("label").css({"color":"green","background-color":"#6600cc"}) && $(this).closest("label").css({"color":"green","background-color":"orange"}); } }); }); 

 input[type=radio], input[type=checkbox] { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label for="Male"> <input type="radio" class="button" id="Male" name="gender"> </label> <label for="Female"> <input type="radio" class="button" id="Female" name="gender"> </label> </form> 

Answer 3

Checkbox dont have a background colour. What you can do is wrap the checkbox with a div that has a colour.

<div class='yellow' >
  <input type="radio" class="button" id="Male" name="gender">Male</input>
</div>

Answer 4

In jquery you can set onclick of button background is set to yellow or a {color: red}

a:active {color: blue}

Answer 5

The + selector is the "next sibling" relationship selector . So the following selector applies to <label> elements that are the next siblings of checked radio button elements, but in your html the <label> elements are parents of the radio button elements.

form input[type="radio"]:checked + label {
    background-color: yellow;
}

Your CSS will work if you change your html so the <label> elements are the next siblings of the radio button elements.

<form>
    <input type="radio" class="button" id="Male" name="gender"/>
    <label for="Male">Male</label>
    <input type="radio" class="button" id="Female" name="gender"/>
    <label for="Female">Female</label>
</form>

jsfiddle

Answer 6

Using jQuery you can do the following —

HTML:

 <div id=“gen”> 
    <input type="radio" class=“button" id="Male" name="gender"> <label for=“Male”>Male </label>
    <input type="radio" class=“button" id="Female" name="gender"><label for=“Female”>Female</label>
</div>

Add this CSS to yours:

.yellow{
background: yellow;
}

JS:

$(document).ready(function(){
$("input[name=gender]").click(function() {
    $(“#gen > label").addClass('yellow');
   }
});
});