选中复选框时更改标签文本颜色

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>