自定义Checkbox点击后勾选图标不显示，如何修复？

数据老陈

2026-8-25

修复自定义复选框点击后勾选图标不显示的问题

你遇到的核心问题是CSS选择器书写错误，导致勾选状态的样式无法正确应用到自定义复选框上。

当前代码问题分析

你的HTML结构中，input和label是.checkbox-agreement容器下的同级元素，但CSS里的选择器.checkbox-agreement input:checked + .checkbox-agreement label:before多嵌套了一层.checkbox-agreement，这会让浏览器找不到对应的目标元素，自然无法触发勾选图标的样式。

修复后的完整代码

HTML代码（无需修改）

<div class="input-container">
  <span class="checkbox-agreement">
   <input type="checkbox" id="agreement">
   <label for="agreement">I have read understand and agree to Terms of
    Use, Privacy Policy, Disclosures&Disclaimers.</label>
    </span>
</div>

修复后的CSS代码

.checkbox-agreement input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 20px;
}

.checkbox-agreement label {
  position: relative;
  padding: 0 0 0 30px;
  cursor: pointer;
}

.checkbox-agreement label:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 5px;
  left: 0;
  border: none;
  box-sizing: border-box;
  background: #f5f7f9;
  box-shadow: inset 0px 0px 5.7971px rgba(38, 31, 123, 0.05);
  border-radius: 2.89855px;
}

.checkbox-agreement label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s;
}

/* 修正选择器，去掉多余的.checkbox-agreement */
.checkbox-agreement input:checked + label:before {
  background-image: url("...");
  background-repeat: no-repeat;
  background-position: center;
}