CSS radio selected label unique color

Question

I have two radio buttons I want to give the same color as :hover when :checked. Can this be done using CSS or do I need an .active class to toggle in JS?

#shopping-bag[data-toggle="buttons"] label:hover,
#shopping-bag[data-toggle="buttons"] label:checked {
  color: #3b5998;
}

#rocket[data-toggle="buttons"] label:hover,
#rocket[data-toggle="buttons"] label:checked {
  color: #d34836;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<div class="btn-opt btn" id="shopping-bag" data-toggle="buttons">
  <label class="radio shopbtn" for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i>&nbsp;Deals</label>
</div>
<div class="btn-opt btn" id="rocket" data-toggle="buttons">
  <label class="radio rocketbtn" for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i>&nbsp;Buzz</label>
</div>

Possible duplicate of [CSS selector for a checked radio button's label](https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label) — Sleek Geek, Apr 27 '18 at 19:05
I don't think a label has a `:checked` state. only a input would — zgood, Apr 27 '18 at 19:06
@Sleek Geek I need the colors to be unique. The `:checked` label color isn't the same — Kyle Underhill, Apr 27 '18 at 19:07

score 1 · Accepted Answer · answered Apr 27 '18 at 19:16

Your options here would be to either use Javascript to select the parent of the input, or to just put the input right before the label and use an adjacent selector to modify your label when the input is checked.

#shopping-bag[data-toggle="buttons"] label:hover,
#shopping-bag[data-toggle="buttons"] input:checked + label {
  color: #3b5998;
}

#rocket[data-toggle="buttons"] label:hover,
#rocket[data-toggle="buttons"] input:checked + label {
  color: #d34836;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<div class="btn-opt btn" id="shopping-bag" data-toggle="buttons">
  <input id="shopbtn" name="toggler" type="radio"><label class="radio shopbtn" for="shopbtn"><i class="fa fa-fw fa-shopping-bag"></i>&nbsp;Deals</label>
</div>
<div class="btn-opt btn" id="rocket" data-toggle="buttons">
  <input id="rocketbtn" name="toggler" type="radio"><label class="radio rocketbtn" for="rocketbtn"><i class="fa fa-fw fa-rocket"></i>&nbsp;Buzz</label>
</div>

CSS radio selected label unique color

1 Answers1