如何自定义复选框样式：未选中隐藏对勾，解决jQuery toggleClass失效问题

问题根源排查 #

• 之前设置图标隐藏的CSS选择器完全匹配不到目标元素：类名为label__checkbox的是原生input标签，本身是自闭合单标签，不存在任何内部子元素，对应的.label__checkbox i.icon规则永远不会命中实际渲染的对勾图标，所有隐藏配置全部失效。
• 后续定义的.label__check i.icon { opacity: 0.2; }规则优先级更高，直接让本来应该隐藏的对勾保持了20%透明度的显示效果，造成视觉混淆。
• 之前尝试用jQuery实现逻辑时常见的失效原因，大多是选择器路径写错、DOM加载完成前就执行了脚本，实际上这个需求完全不需要JS就能实现，也不需要给元素绑定id。

无JS、无id绑定的实现逻辑 #

完全利用原生CSS的相邻兄弟选择器，基于input的勾选状态联动控制图标的显隐，不需要额外写脚本、不需要给任何元素加唯一标识：

• 给未勾选状态下的对勾图标设置完全隐藏的默认样式
• 当input触发:checked伪类时，通过相邻兄弟选择器找到同层级的对勾元素，切换为可见状态
• 保留已实现的勾选动画、背景色切换效果即可

修正后的关键样式片段 #

/* 未勾选默认状态：对勾完全不可见 */
.label__check i.icon {
  opacity: 0;
  visibility: hidden;
  font-size: calc(9rem + 1vw);
  color: white;
}

/* 勾选状态：联动显示对勾 */
.label__checkbox:checked + .label__text .label__check .icon {
  opacity: 1;
  visibility: visible;
  transform: scale(0);
  color: white;
  -webkit-text-stroke: 0;
}

这套规则不需要给任何元素加id，因为所有样式命中都是基于DOM的默认层级结构：input标签和后面的文本容器、对勾容器是相邻同级元素，哪怕页面内存在多个相同结构的复选框，规则也能批量生效。

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