Изменить цвет текста метки, когда установлен флажок

Question

Я пытаюсь изменить цвет текста метки, когда пользователь устанавливает флажок, но не работает. Я видел несколько примеров, но ни один из них не работает с моим кодом ниже:

<label class="subCatRegVars"><input type="checkbox" name="subCatRegVars" value="vlr_adc_brt_serv"> VAB </label>

CSS:
.subCatRegVars + input[type=checkbox]:checked {
      font-weight: bold;
      color: red;
}

Любая помощь была бы замечательной!

Ура

Answer 1

Вы можете добавить span для переноса текста.

input[type=checkbox]:checked + span {
  font-weight: bold;
  color: red;
}

<label class="subCatRegVars">
  <input type="checkbox" name="subCatRegVars" value="vlr_adc_brt_serv">
  <span>VAB</span>
</label>