如何同时修改复选框选中与hover状态下的图标颜色？

看起来你的CSS选择器和伪元素的目标可能没找对，这是自定义复选框样式里很常见的小坑，我来帮你拆解问题并给出修复方案：

常见问题原因 #

通常自定义复选框的逻辑是隐藏原生input，用label::before做未选中的边框容器，用label::after做选中后的图标（比如对勾）。你的原代码大概率有两个问题：

1. 你在修改label::before的color，但选中图标其实是挂载在::after伪元素上的；
2. 原生input是隐藏状态，hover事件不会触发在它身上，用户实际hover的是可见的label元素。

修复方案 #

假设你的HTML是标准的自定义复选框结构：

<input type="checkbox" id="custom-checkbox" class="custom-checkbox">
<label for="custom-checkbox">我的选项</label>

对应的CSS可以这样写，完美实现选中且hover时图标变蓝色的效果：

/* 隐藏原生复选框 */
.custom-checkbox {
  display: none;
}

/* 未选中状态的边框框 */
.custom-checkbox + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #999;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
}

/* 选中状态的图标（这里用对勾示例） */
.custom-checkbox:checked + label::after {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 1px;
  color: #333; /* 默认选中颜色 */
  font-size: 14px;
  font-weight: bold;
}

/* 关键：选中且hover时修改图标颜色 */
.custom-checkbox:checked + label:hover::after {
  color: blue;
}

为什么这样能生效？ #

• 我们监听label:hover而非input:hover：因为原生input是隐藏的，用户实际交互的是可见的label元素；
• 选中图标放在::after伪元素里，所以修改它的color才能真正改变图标的颜色；
• 这个选择器的优先级和基础选中样式一致，只要放在基础样式后面就能顺利覆盖原有颜色。

如果你的图标是用背景图（比如SVG）实现的，那需要修改background-color或者替换background-image而非color，可以告诉我你的具体图标实现方式，我再帮你调整细节。

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