CSS радио выбрал метку уникального цвета

Question

У меня есть две радиокнопки, которые я хочу присвоить тому же цвету, что и :hover, когда :checked. Можно ли это сделать с помощью 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, чтобы выбрать родительский элемент для ввода, или просто поместить ввод прямо перед меткой и использовать соседний селектор , чтобы изменить метку при проверке ввода. .

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