Change the color of the switch label when selecting the switch?

Question

Is there a way to have a shortcut to change the color of the switch when selecting the switch?

I want the label to be the same green as the hover state, but I cannot figure out how to do 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 is the code for demo purposes cdpn.io/ENMMOz

Answer 1

You cannot set the label style (since we don’t have a parent selector in CSS), but you can style the text for 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 the 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> 

Answer 2

Try changing the color with span when the label checked, use the ~ operator, for example:

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

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

Answer 3

EDIT: Woah! I completely missed the fact that your text spaces are actually inside the labels themselves, so your solution could very well be reached in CSS. Instead of providing you with this answer here, it seems that Cook's answer already does just that!

I will leave this answer here so that you can see how the syntax might look for a jQuery solution, although I would certainly suggest using pure CSS!

---

As you mentioned in the comments, you are open to jQuery solution, so below I have provided it.

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 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 just need to add this simple class to your CSS:

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