如果选中复选框，则突出显示标签

Question

选中相应的复选框时，是否有非 javascript 方式来更改标签的颜色？

原文由 Vladimir Keleshev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 相邻的兄弟组合器：

 .check-with-label:checked + .label-for-check {
  font-weight: bold;
}

 <div>
  <input type="checkbox" class="check-with-label" id="idinput" />
  <label class="label-for-check" for="idinput">My Label</label>
</div>

原文由 Andrew Marshall 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我喜欢安德鲁的建议，事实上 CSS 规则只需要是：

 :checked + label {
   font-weight: bold;
}

我喜欢依赖 label 和 input 元素的隐式关联，所以我会做这样的事情：

 <label>
   <input type="checkbox"/>
   <span>Bah</span>
</label>

使用 CSS：

 :checked + span {
    font-weight: bold;
}

示例：http: //jsfiddle.net/wrumsby/vyP7c/

原文由 Walter Rumsby 发布，翻译遵循 CC BY-SA 3.0 许可协议