CSS选择器失效：复选框选中时无法改变Label边框颜色

你的CSS选择器无效的原因是：#checker:checked label 是在寻找选中状态的checkbox内部的label元素，但实际label和checkbox是同级关系，且label在checkbox之前——CSS传统兄弟选择器只能选中当前元素之后的元素，无法选中之前的。

以下是三种可行的解决方案：

方案一：调整HTML结构，使用通用兄弟选择器 #

将checkbox移动到所有关联label的前面，用~选择器选中checkbox之后的所有label：

HTML代码 #

<input type="checkbox" id="checker" checked>
<label for="checker">test</label>
<label for="checker">test</label>

CSS代码 #

label{
  width:36px;
  height:36px;
  padding:9px;
  border:1px solid gray;
  border-radius:36px;
}

#checker:checked ~ label{
  border-color:red;
}

方案二：使用CSS :has()选择器（无需调整HTML结构） #

利用:has()选择器匹配"后面跟着选中状态checkbox"的label，无需修改原有HTML结构：

CSS代码 #

label{
  width:36px;
  height:36px;
  padding:9px;
  border:1px solid gray;
  border-radius:36px;
}

label:has(+ #checker:checked){
  border-color:red;
}

注：:has()选择器支持Chrome 101+、Firefox 121+等现代浏览器，如需兼容旧版浏览器不推荐使用。

方案三：将Checkbox嵌入Label内部（兼容性最优） #

把checkbox放到label标签内部，这样可以通过:has()直接关联样式，同时无需使用for和id属性：

HTML代码 #

<label>
  <input type="checkbox" checked>
  test
</label>
<label>
  <input type="checkbox" checked>
  test
</label>

CSS代码 #

label{
  width:36px;
  height:36px;
  padding:9px;
  border:1px solid gray;
  border-radius:36px;
}

label:has(input:checked){
  border-color:red;
}

内容的提问来源于stack exchange，提问作者Alper Uluses