CSS实现：复选框选中时修改其父级label标签的背景色？

当然可以只靠纯CSS搞定这个需求！我给你两种实用方案，分别适配不同的浏览器兼容性场景：

方案一：用:has()伪类（现代浏览器首选） #

现在主流现代浏览器都支持CSS的:has()伪类了，它相当于「父选择器」，能直接选中包含特定子元素的父元素，完美匹配你的需求，而且完全不用修改现有HTML结构！

你只需要在原有CSS基础上添加这一段：

label:has(input[type="checkbox"]:checked) {
  background-color: #FC0;
}

完整的CSS代码参考：

label {
  display: inline-block;
  padding: 5px;
  background: #CCC;
  color: #fff;
  border-radius: 999em;
  -moz-border-radius: 999em;
  -webkit-border-radius: 999em;
  cursor: pointer; /* 加上这个，让整个标签区域看起来都能点击 */
}

label:has(input[type="checkbox"]:checked) {
  background-color: #FC0;
}

/* 可选：把原生复选框隐藏，让label完全作为交互入口 */
label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

这个方案的好处是零HTML改动，Chrome、Firefox 121+、Safari 15.4+都支持，适合现代项目使用。

方案二：调整HTML结构兼容旧浏览器 #

如果需要兼容不支持:has()的旧浏览器（比如Firefox 120及更早版本），可以稍微调整下HTML结构——把复选框移到label外面，然后用相邻兄弟选择器（+）来关联样式：

修改后的HTML：

<input type='checkbox' id='tag1' name='tag' value='1' />
<label for='tag1'> Tag #1</label>

<input type='checkbox' id='tag2' name='tag' value='2' />
<label for='tag2'> Tag #2</label>

<input type='checkbox' id='tag3' name='tag' value='3' />
<label for='tag3'> Tag #4</label>

对应的CSS：

label {
  display: inline-block;
  padding: 5px;
  background: #CCC;
  color: #fff;
  border-radius: 999em;
  -moz-border-radius: 999em;
  -webkit-border-radius: 999em;
  cursor: pointer;
}

/* 复选框选中后，修改紧邻的label样式 */
input[type="checkbox"]:checked + label {
  background-color: #FC0;
}

/* 可选：隐藏原生复选框 */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

这个方案兼容性拉满，能覆盖绝大多数旧浏览器，唯一需要做的就是给每个复选框加个id，让label的for属性对应上，保证点击标签依然能触发复选框的选中状态。

小提示 #

不管用哪种方案，都建议给label加上cursor: pointer，这样用户一眼就能看出这是可点击的交互元素，体验更好～

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