仅用CSS实现自定义复选框选中时标签文字变色的问题

嘿，我懂你遇到的问题了——自定义复选框的颜色已经搞定，但文本标签就是没法跟着选中状态变色，还只想用纯CSS解决，对吧？这事儿其实挺简单的，关键是利用CSS的选择器把复选框的状态和文本标签关联起来，我给你两种方案，看哪种适合你的场景：

方案1：兼容旧浏览器（推荐，无兼容性问题） #

这个方案需要给文本标签加一个额外的<span>标签，方便精准选中，对所有现代和旧版浏览器都友好：

HTML结构（调整后） #

<label class="container">
  <input type="checkbox">
  <span class="checkmark"></span>
  <span class="label-text">你的文本标签内容</span>
</label>

完整CSS代码（包含你的原有样式+文本变色逻辑） #

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee; /* 默认复选框背景 */
  transition: background-color 0.2s ease;
}

/* 鼠标悬停时的复选框样式 */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* 复选框选中时的背景色（你自定义的颜色） */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* 选中后显示对勾（可选，按需调整样式） */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* 核心：文本标签的颜色控制 */
.container .label-text {
  color: #333; /* 默认文本颜色 */
  transition: color 0.2s ease; /* 可选，添加平滑过渡动画 */
}

/* 复选框选中时，文本标签变色 */
.container input:checked ~ .label-text {
  color: #2196F3; /* 和复选框选中颜色保持一致 */
}

方案2：现代浏览器专属（无需额外HTML元素） #

如果你的项目只需要支持Chrome、Firefox、Safari 15.4+、Edge等现代浏览器，可以用CSS的:has伪类，不用给文本加额外标签：

HTML结构（和你原有结构一致） #

<label class="container">
  <input type="checkbox">
  <span class="checkmark"></span>
  你的文本标签内容
</label>

只需添加这段CSS到你的原有代码中 #

/* 默认文本颜色（如果没设置的话） */
.container {
  color: #333;
  transition: color 0.2s ease;
}

/* 当容器内的复选框被选中时，修改整个容器的文本颜色 */
.container:has(input:checked) {
  color: #2196F3; /* 自定义选中时的文本颜色 */
}

原理说明 #

• 方案1用了通用兄弟选择器（~）：当input被选中（:checked）时，选中它后面的.label-text元素，修改其颜色；
• 方案2用了**:has伪类**：让父容器.container根据子元素input的选中状态，自动修改自身的文本颜色，省去了额外的HTML标签。

你可以根据自己的浏览器兼容需求选择对应的方案，两种都能实现纯CSS控制文本标签随复选框选中状态变色的效果~

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