如何在CSS中修改自定义复选框的勾选框颜色？

嘿，我之前也踩过自定义复选框样式的坑，你的问题大概率是用错了CSS属性——咱们先理清楚自定义复选框的常见实现逻辑，再一步步解决。

首先，你代码里的.checkmark:after是用来绘制对勾的伪元素，而绝大多数自定义复选框的对勾是用边框（border） 来实现的，不是用color属性控制颜色的。color通常是控制文本颜色，对用border画出来的对勾不起作用哦！

具体排查和修改步骤： #

1. 先确认对勾的实现方式
   打开浏览器开发者工具（F12），选中选中状态下的.checkmark:after元素，查看它的基础样式：

   • 如果看到border: solid white;这类代码，说明对勾是边框画的，那你需要把color: #000改成border-color: #000。
   • 如果对勾是用background-color或者背景图实现的，那就对应修改background-color属性。

2. 修正你的CSS代码
   把原来的代码：

   .container input:checked ~ .checkmark:after { display: block; color: #000 !important; }
   

   改成（针对边框实现的对勾）：

   .container input:checked ~ .checkmark:after {
     display: block;
     border-color: #000 !important; /* 替换成border-color */
   }
   

3. 额外检查点

   • 确保你的选择器input:checked ~ .checkmark:after是正确的：input和.checkmark必须是同级元素，并且都在.container容器内。
   • 用开发者工具看看有没有其他CSS规则覆盖了你的样式，如果有，可以调整权重或者更精准的选择器。

完整可运行的示例代码 #

给你贴一个完整的自定义复选框示例，你可以参考调整：

<label class="container">
  测试选项
  <input type="checkbox" checked>
  <span class="checkmark"></span>
</label>

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

/* 隐藏原生复选框 */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 自定义复选框的外框 */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* 鼠标悬停效果 */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* 选中时的外框背景色 */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* 对勾的基础样式（用边框绘制） */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* 选中时显示对勾并修改颜色 */
.container input:checked ~ .checkmark:after {
  display: block;
  border-color: #000 !important;
}
</style>

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