自定义Checkbox勾选后对勾不显示？求原因及修复方案

你的自定义勾选框勾选后不显示对勾，核心问题是CSS选择器错误：

你写的.checkbox input:checked ~ .checkbox::after完全无效——~是相邻兄弟选择器，它只能选中和目标元素同级的后续元素，但这里input是.checkbox的子元素，.checkbox是input的父元素，两者并非同级关系，所以这个选择器永远匹配不到任何元素，自然无法触发对勾显示。

另外还有个小细节：原代码里的对勾伪元素没有设置边框颜色，默认会继承父元素文字颜色，可能和背景色对比不明显，建议补充颜色属性。

解决方法一：现代浏览器兼容（无需改HTML） #

使用:has选择器直接通过子元素状态控制父元素的伪元素，适合Chrome、Firefox 121+等现代浏览器：

修改后的完整CSS：

.bottom {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.left {
  display: flex;
  flex-direction: row;
  position: relative;
}

/* Hide the actual checkbox */
input[type=checkbox] {
  opacity: 0;
  margin-right: 4px;
  cursor: pointer; /* 让点击区域更直观 */
}

/* Create a custom checkbox*/
.checkbox::before {
  content: "";
  border: none;
  border-radius: 2px;
  height: 16px;
  width: 16px;
  position: absolute;
  background-color: #737373;
}

.checkbox::after {
  content: "";
  border: 3px solid #fff; /* 补充白色边框，和灰色背景形成对比 */
  border-top: 0;
  border-left: 0;
  width: 4px;
  height: 9px;
  position: absolute;
  top: 1px;
  left: 5px;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 10ms;
}

/* 修正选择器：当checkbox容器内的input被勾选时，显示对勾 */
.checkbox:has(input:checked)::after {
  opacity: 1;
}

解决方法二：全浏览器兼容（调整HTML结构） #

如果需要兼容不支持:has的旧浏览器，可以调整HTML结构，让input和自定义勾选框容器同级，用兄弟选择器控制：

修改后的HTML #

<div class="bottom">
  <div class="left">
    <div class="checkbox-wrapper" style="margin-right: 3px;">
      <input type="checkbox">
      <span class="checkmark"></span>
    </div>
    <span>Remember me</span>
  </div>
  <span>Need help?</span>
</div>

对应的CSS #

.bottom {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.left {
  display: flex;
  flex-direction: row;
  align-items: center; /* 让文字和勾选框垂直居中 */
}

.checkbox-wrapper {
  position: relative;
  display: inline-block;
}

/* Hide the actual checkbox */
input[type=checkbox] {
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Create a custom checkbox*/
.checkmark::before {
  content: "";
  border: none;
  border-radius: 2px;
  height: 16px;
  width: 16px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #737373;
}

.checkmark::after {
  content: "";
  border: 3px solid #fff;
  border-top: 0;
  border-left: 0;
  width: 4px;
  height: 9px;
  position: absolute;
  top: 1px;
  left: 5px;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 10ms;
}

/* 兄弟选择器：input勾选后显示对勾 */
input[type=checkbox]:checked ~ .checkmark::after {
  opacity: 1;
}

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