根据<input>的状态设置<label>的样式

Question

仅使用CSS,是否可以根据其输入的状态设置HTML标签的样式？

在我的情况下,我想<input type="checkbox">根据是否检查来设置样式.

我尝试将标签放在输入中,但Firefox和Chrome(至少)似乎将它们解析为兄弟姐妹,即使它们明显嵌套在输入源中.我不知道如何编写一个可以间接通过for =属性的CSS规则.

我是否需要在这个上输出Javascript？

Answer 1

它们不需要嵌套,这就是<label>元素中"for"属性的含义.

在现代浏览器(支持CSS 2.1的浏览器)中,您可以使用兄弟选择器,例如

input + label {
  /* rules */
}

您必须将您的标记置于严格的兄弟关系中,例如:

<input name="cb" id="cb" type="checkbox"><label for="cb">Checkbox</label>