自定义表单复选框时CSS类无法识别的问题求助

首先，我注意到你的HTML代码里有个明显的小错误——<span class="labeltext">1<span>这里的闭合标签写错了，应该是</span>。标签不闭合会导致浏览器对DOM结构的解析出现异常，这很可能是样式不生效的第一个诱因。

接下来咱们聊聊:before伪元素生效的核心前提：伪元素需要作用在有内容的元素，或者设置了非inline的display属性（比如inline-block、block）的元素上。另外，自定义复选框的常规思路是隐藏原生input，再用相邻的span来模拟复选框样式，咱们一步步调整：

第一步：修正HTML标签结构 #

先把错误的闭合标签改过来，确保DOM结构合法：

<label>
  <input type="checkbox" name="check" value="1"/>
  <span class="labeltext">1</span>
</label>

第二步：调整CSS代码实现自定义样式 #

原生复选框和span是相邻元素，我们可以用兄弟选择器+来关联它们的状态，同时让:before伪元素正常渲染：

/* 隐藏原生复选框，避免它干扰自定义样式 */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 给.labeltext设置基础布局，为伪元素预留空间 */
.labeltext {
  position: relative;
  padding-left: 22px; /* 给模拟的复选框留出位置 */
  display: inline-block; /* 确保伪元素能被正确定位 */
  cursor: pointer;
}

/* 用:before模拟复选框的默认状态 */
.labeltext:before {
  content: ""; /* 先清空默认内容，后续可替换为图标或文字 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 2px;
}

/* 复选框被勾选时的样式 */
input[type="checkbox"]:checked + .labeltext:before {
  content: "✓"; /* 勾选后的标记，也可以用背景图替代 */
  text-align: center;
  line-height: 18px;
  color: #1677ff;
  border-color: #1677ff;
  background-color: #e6f4ff;
}

你的原始CSS没生效的关键原因 #

1. HTML标签未闭合：错误的<span>闭合导致浏览器解析DOM时，.labeltext元素的范围不符合预期，样式自然无法正确作用；
2. 伪元素显示条件不足：:before默认是行内元素，若不给.labeltext设置定位或块级显示，伪元素的位置和渲染会出现异常，甚至被浏览器忽略；
3. 未关联复选框状态：自定义复选框需要通过兄弟选择器绑定原生input的状态，否则无法实现勾选/未勾选的样式切换。

你可以先修正HTML标签，再替换成调整后的CSS代码，应该就能看到预期的效果啦。

内容的提问来源于stack exchange，提问作者Rik Rödel