Changing Background Color With CSS On Radio Button Input When :checked

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

Solution 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!!!

Solution 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>

Solution 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>

Solution 4:

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

Solution 5:

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');
   }
});
});