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

July 27, 2023 Post a Comment

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><inputtype="radio"class="button"id="Male"name="gender"></input><labelfor="Male">Male</label><inputtype="radio"class="button"id="Female"name="gender"></input><labelfor="Female">Female</label></form>

Keeping the same CSS :

/*----------------------------------
        SIDEBAR
        ----------------------------------*/input[type=radio],
 input[type=checkbox] {
   display: none;
 }
 forminput[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><labelfor="Male"><inputtype="radio"class="button"id="Male"name="gender" >Male</input></label><labelfor="Female"><inputtype="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;
     }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><labelfor="Male"><inputtype="radio"class="button"id="Male"name="gender"></label><labelfor="Female"><inputtype="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.

forminput[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><inputtype="radio"class="button"id="Male"name="gender"/><labelfor="Male">Male</label><inputtype="radio"class="button"id="Female"name="gender"/><labelfor="Female">Female</label></form>

jsfiddle

Solution 5:

Using jQuery you can do the following —

HTML:

<divid=“gen”><inputtype="radio"class=“button" id="Male"name="gender"><labelfor=“Male”>Male </label><inputtype="radio"class=“button" id="Female"name="gender"><labelfor=“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');
   }
});
});

Html5 Ready