Change radio button label's color when radio button is selected?

Question

Is there a way to have a label for a radio button's color change when the radio button is selected?

I want the label to be the same green it is on the hover state, but I can't seem to figure out how to achieve this?

label.btn span {
  font-size: 16px;
}
i.fa {
  font-size: 24px;
}
i.fa.fa-dot-circle-o {
  font-size: 24px;
}
label input[type="radio"] {
  color: #c8c8c8;
  display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {
  color: #78a025;
  display: inline;
  font-size: 24px;
}
label:hover input[type="radio"] ~ i.fa {
  color: #78A025;
}
label input[type="checkbox"] ~ i.fa.fa-square-o {
  color: #c8c8c8;
  display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o {
  display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o {
  display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o {
  color: #78A025;
  display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
  color: #78a025;
}
div[data-toggle="buttons"] label.active {
  color: #78a025;
}
div[data-toggle="buttons"] label {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 2em;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  background-color: none;
  border: 0px solid #c8c8c8;
  border-radius: 3px;
  color: #c8c8c8;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
div[data-toggle="buttons"] label:hover {
  color: #78A025;
}
div[data-toggle="buttons"] label:active,
div[data-toggle="buttons"] label.active {
  -webkit-box-shadow: none;
  box-shadow: none;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<div class="row">
  <div class="col-xs-12">
    <br>Vertical radio:
    <br>
    <div class="btn-group btn-group-vertical" data-toggle="buttons">
      <label class="btn">
        <input type="radio" name='gender1' checked><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i>  <span>  Male</span>
      </label>
      <label class="btn">
        <input type="radio" name='gender1'><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> Female</span>
      </label>
    </div>

  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <hr>Vertical checkbox:
    <br>
    <div class="btn-group btn-group-vertical" data-toggle="buttons">
      <label class="btn">
        <input type="checkbox" name='email1' checked><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i>  <span> Marketing Email</span>
      </label>
      <label class="btn">
        <input type="checkbox" name='email2'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Alert Email</span>
      </label>
      <label class="btn">
        <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Account Email</span>
      </label>
    </div>


  </div>
</div>

Here's a codepen for demonstration purposes cdpn.io/ENMMOz

Unfortunately, I don't *think* this is possible with pure CSS. CSS doesn't allow a child element to directly change it's parent element, as is implied in the nomenclature *Cascading* Style Sheets. There's `>` for direct descendant selectors and `~` for general sibling selectors, but I'm not aware of any sort of "parent" selector. This could certainly be attained with a bit of simple JavaScript, but instead of supplying this as an answer, I'd still like to see if someone can prove me incorrect regarding the CSS bit. Otherwise, you could always rework your HTML to fit something CSS *can* do. — Tyler Roper, Dec 21 '16 at 16:26
If js is the answer here, I'm not opposed to implementing it. I'm just not sure how to go about selecting the label of the active button. — Corey Davenport, Dec 21 '16 at 16:30

score 7 · Answer 1 · answered Dec 21 '16 at 16:31

You can't set the style of the label (as we don't have a parent selector in CSS), but you can style the text for the radiobutton or checkbox - the intended result - using this:

label input[type="radio"]:checked ~ span {
  color: #78a025;
}
label input[type="checkbox"]:checked ~ span {
  color: #78a025;
}

See demo below:

label.btn span {
  font-size: 16px;
}
i.fa {
  font-size: 24px;
}
i.fa.fa-dot-circle-o {
  font-size: 24px;
}
label input[type="radio"] {
  color: #c8c8c8;
  display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {
  color: #78a025;
  display: inline;
  font-size: 24px;
}
label:hover input[type="radio"] ~ i.fa {
  color: #78A025;
}
label input[type="checkbox"] ~ i.fa.fa-square-o {
  color: #c8c8c8;
  display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o {
  display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o {
  display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o {
  color: #78A025;
  display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
  color: #78a025;
}
div[data-toggle="buttons"] label.active {
  color: #78a025;
}
div[data-toggle="buttons"] label {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 2em;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  background-color: none;
  border: 0px solid #c8c8c8;
  border-radius: 3px;
  color: #c8c8c8;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
div[data-toggle="buttons"] label:hover {
  color: #78A025;
}
div[data-toggle="buttons"] label:active,
div[data-toggle="buttons"] label.active {
  -webkit-box-shadow: none;
  box-shadow: none;
}
label input[type="radio"]:checked ~ span {
  color: #78a025;
}
label input[type="checkbox"]:checked ~ span {
  color: #78a025;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<div class="row">
  <div class="col-xs-12">
    <br>Vertical radio:
    <br>
    <div class="btn-group btn-group-vertical" data-toggle="buttons">
      <label class="btn">
        <input type="radio" name='gender1' checked><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i>  <span>  Male</span>
      </label>
      <label class="btn">
        <input type="radio" name='gender1'><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> Female</span>
      </label>
    </div>

  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <hr>Vertical checkbox:
    <br>
    <div class="btn-group btn-group-vertical" data-toggle="buttons">
      <label class="btn">
        <input type="checkbox" name='email1' checked><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i>  <span> Marketing Email</span>
      </label>
      <label class="btn">
        <input type="checkbox" name='email2'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Alert Email</span>
      </label>
      <label class="btn">
        <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Account Email</span>
      </label>
    </div>


  </div>
</div>

This worked perfectly! Thanks! – Corey Davenport Dec 21 '16 at 16:36 — Corey Davenport, Dec 21 '16 at 16:36

Saurav Rastogi · Answer 2 · 2016-12-21T16:39:12.740

Try changing the color using span when label is checked, use ~ operator, like:

label input[type="radio"]:checked ~ span {
    color: #78a025;
}

label input[type="checkbox"]:checked ~ span {
    color: #78a025;
}

Have a look at the snippet below:

label.btn span {
  font-size: 16px ;
}
i.fa{
  font-size: 24px;
}
i.fa.fa-dot-circle-o{
  font-size: 24px;
}

label input[type="radio"]{
    color: #c8c8c8;    display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o{
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o{
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o{
    color: #78a025;    
    display: inline;
    font-size: 24px;
}

label input[type="radio"]:checked ~ span {
    color: #78a025;
}



label:hover input[type="radio"] ~ i.fa {
color: #78A025;
}

label input[type="checkbox"] ~ i.fa.fa-square-o{
    color: #c8c8c8;    display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o{
    display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
    display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
    color: #78A025;    display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
color: #78a025;
}

div[data-toggle="buttons"] label.active{
    color: #78a025;
}

label input[type="checkbox"]:checked ~ span {
    color: #78a025;
}

div[data-toggle="buttons"] label {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 2em;
text-align: left;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: none;
border: 0px solid 
#c8c8c8;
border-radius: 3px;
color: #c8c8c8;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

div[data-toggle="buttons"] label:hover {
color: #78A025;
}

div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">  

<div class="row">
    <div class="col-xs-12">
      <br> Vertical radio:
      <br>
      <div class="btn-group btn-group-vertical" data-toggle="buttons">
        <label class="btn">
          <input type="radio" name='gender1' checked><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i> <span>  Male</span>
        </label>
        <label class="btn">
          <input type="radio" name='gender1'><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> Female</span>
        </label>
      </div>

    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <hr> Vertical checkbox:
      <br>
      <div class="btn-group btn-group-vertical" data-toggle="buttons">
        <label class="btn">
          <input type="checkbox" name='email1' checked><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i> <span> Marketing Email</span>
        </label>
        <label class="btn">
          <input type="checkbox" name='email2'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Alert Email</span>
        </label>
        <label class="btn">
          <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Account Email</span>
        </label>
      </div>


    </div>
  </div>

Hope this helps!

score 3 · Answer 3 · edited May 23 '17 at 12:16

EDIT: Woah! I completely missed the fact that your text spans are actually within the labels themselves, so your solution could very well be achieved in CSS. Rather than supplying you with that answer here, it seems like Kukkuz's answer already does exactly that!

I'll leave this answer here just so you can see what the syntax might look like for a jQuery solution, though I'd certainly suggest using pure CSS when possible!

As you mentioned in the comments, you're open to a jQuery solution, so below I've provided one.

Here is an example: https://jsfiddle.net/j7n9zyaj/

And the code:

//When a checkbox/radio is clicked...
$('input[type=radio], input[type=checkbox]').on("click", function() {

    var $t = $(this);

    //If it's checked
    if ($t.is(':checked')) {
        //Add the green class to the parent
        $t.parent().addClass("greenText");
    } else {
        //Remove the green class from the parent
        $t.parent().removeClass("greenText");
    }

});

And you'll just need to add this simple class to your CSS:

.greenText {
    color: #78A025 !important;
}

User @kukkuz provides a CSS-only solution at accomplishing what the post author wants ("the label to be the same color green on the hover state") without modifying the HTML. JS is probably overkill for this one. — Jon Uleis, Dec 21 '16 at 16:37

Change radio button label's color when radio button is selected?

3 Answers3