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>

It doesn't change the background of the button from grey to yellow, which is what I'm trying to do. — Andrew Nguyen, Feb 17 '15 at 04:44
possible duplicate of [CSS - How to Style a Selected Radio Buttons Label?](http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label) — Ahmad, Feb 17 '15 at 05:01
@AndrewNguyen You should learn to mark answers that help you. It will help others that come across your questions. Also, a token of appreciation for people who take time out to help you shouldn't be asking for too much, I hope!!! — Satwik Nadkarny, Feb 17 '15 at 05:32
Definitely, looks like you've submitted an awesome answer, just have to get around to try the code sample first, before giving it the green light. Always appreciative. — Andrew Nguyen, Feb 17 '15 at 22:03

score 3 · Answer 1 · answered Feb 17 '15 at 05:25

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

score 1 · Answer 2 · answered Dec 02 '17 at 10:53

$(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>

Please explain what changes you made and why! – monamona Dec 02 '17 at 11:11 — monamona, Dec 02 '17 at 11:11

score 0 · Answer 3 · answered Feb 17 '15 at 04:52

0

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>

answered Feb 17 '15 at 04:52

Azadey

11
4

score 0 · Answer 4 · answered Feb 17 '15 at 05:00

0

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

a:active {color: blue}

answered Feb 17 '15 at 05:00

John S · Answer 5 · 2015-02-17T05:10:09.953

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

score 0 · Answer 6 · answered Jul 28 '16 at 21:15

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

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

Problem

Code snippet

6 Answers6

SOLUTION 1 :CSS Solution

SOLUTION 2 : jQuery Solution

Linked