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

This question already has an answer here:

Is there a CSS parent selector? 26 answers

---

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>

---

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

---

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>

链接地址: http://www.djcxy.com/p/22830.html

上一篇: 关注焦点父元素的风格

下一篇: 选择单选按钮时更改单选按钮标签的颜色？