CODEWITHSUNDEEP
htmlcssradio-button
Kyle Underhill
Kyle Underhill

Reputation: 109

CSS radio selected label unique color

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>

Upvotes: 1

Views: 74

Answers (1)

Chase Ingebritson
Chase Ingebritson

Reputation: 1579

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>

Upvotes: 1

Related Questions