html - CSS radio 选中的标签唯一颜色

Question

我有两个单选按钮，当 :checked 时，我想赋予与 :hover 相同的颜色。这可以使用 CSS 完成，还是我需要一个 .active 类来切换 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>

Answer 1

您在这里的选择是使用 Javascript 选择输入的父级，或者只是将输入放在标签之前并使用 adjacent selector。选中输入时修改标签。

#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>