如何用纯CSS（无JS）根据复选框状态控制<label>样式？

完全不需要JS，靠CSS的伪类和选择器就能轻松根据复选框的勾选状态给<label>设置样式，甚至隐藏原生复选框的勾选标记，用<label>的样式来替代，既省空间又能自定义外观。下面给你分步拆解具体做法：

第一步：确保复选框和label正确关联 #

要让CSS能关联两者的状态，首先得保证<input>和<label>绑定正确，有两种常用方式：

• 给<input>设置id，<label>设置对应的for属性（适合兄弟结构）
• 把<input>直接嵌套在<label>内部（适合内联结构）

第二步：隐藏原生复选框的勾选标记 #

用appearance: none可以直接去掉原生复选框的默认外观，再配合宽高设置彻底隐藏它（但保留点击交互，因为点击label会触发复选框）：

input[type="checkbox"] {
  /* 去掉原生外观 */
  appearance: none;
  /* 彻底隐藏元素但不影响交互 */
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}

如果需要兼容更老的浏览器，也可以用opacity: 0加绝对定位的方式：

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  pointer-events: none; /* 避免干扰label的点击 */
}

第三步：用CSS伪类关联勾选状态 #

利用:checked伪类检测复选框的勾选状态，再通过兄弟选择器或后代选择器选中对应的<label>来修改样式：

场景1：input和label是兄弟结构 #

这种结构下用相邻兄弟选择器+就能选中紧跟在勾选复选框后的label：

<div class="checkbox-item">
  <input type="checkbox" id="opt1">
  <label for="opt1">我是选项1</label>
</div>

/* 默认label样式 */
label {
  padding: 6px 12px;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

/* 复选框勾选后的label样式 */
input[type="checkbox"]:checked + label {
  background: #4CAF50;
  color: white;
}

场景2：input嵌套在label内部 #

这种结构可以用:has()选择器直接选中包含勾选复选框的label，或者用后代选择器选中label内的文本元素：

<label class="checkbox-wrap">
  <input type="checkbox">
  <span>我是选项2</span>
</label>

.checkbox-wrap {
  display: inline-block;
  padding: 6px 12px;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

/* 用:has()直接选中勾选后的label */
.checkbox-wrap:has(input[type="checkbox"]:checked) {
  background: #2196F3;
  color: white;
}

/* 或者用后代选择器修改内部文本样式 */
.checkbox-wrap input[type="checkbox"]:checked ~ span {
  font-weight: bold;
}

关键原理说明 #

• :checked伪类会匹配处于勾选状态的复选框
• 兄弟选择器+/~和:has()选择器能把复选框的状态传递给关联的label，从而实现样式联动
• 隐藏原生复选框后，点击label依然能触发复选框的状态切换（这是HTML的原生行为）

这样一来，你就完全可以用label的样式来替代原生复选框的外观，既节省了页面空间，又能实现高度自定义的交互效果~

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