使用:checked + label可实现无JavaScript的自定义复选框，通过隐藏原生输入框并利用伪元素为关联label创建视觉样式，当复选框选中时改变相邻label的外观，实现美观交互效果。

使用 :checked + label 可以在不依赖JavaScript的情况下，实现自定义复选框样式。核心思路是利用复选框的选中状态来控制其后相邻的 label 元素的外观，从而隐藏默认复选框并展示更美观的自定义样式。

基本HTML结构

要实现这种效果，HTML中需要将 input[type="checkbox"] 和对应的 label 按正确顺序排列，且使用 for 属性或嵌套方式建立关联：

我同意条款

注意：CSS中的 + 是相邻兄弟选择器，意味着 label 必须紧跟在 input 后面，否则无法生效。

隐藏默认复选框

首先将原生的复选框隐藏，但保留其功能：

立即学习“前端免费学习笔记（深入）”；

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

这样复选框仍可点击（通过label触发），但视觉上不可见。

定义默认label样式

为 label 设置自定义复选框的“未选中”外观：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

label {
  display: inline-block;
  padding-left: 28px;
  position: relative;
  cursor: pointer;
}

label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: white;
}

这里用伪元素 ::before 模拟一个方形框作为自定义复选框。

通过:checked改变相邻label样式

当复选框被选中时，使用 :checked + label 修改其后相邻的 label 的伪元素，添加对勾或背景色：

input[type="checkbox"]:checked + label::before {
  border-color: #007bff;
  background-color: #007bff;
}

label::after {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 12px;
  opacity: 0;
}

input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

选中状态下显示白色对勾，提升视觉反馈。

完整示例说明

整个机制依赖于：

• 复选框与label在DOM中相邻
• label的for属性指向input的id
• CSS使用:checked + label精准控制相邻label样式
• 伪元素模拟图形，避免额外DOM节点

用户点击label时，会触发input状态切换，从而更新样式，实现完全自定义的复选框效果。

基本上就这些，不复杂但容易忽略细节，比如元素顺序和定位控制。只要结构正确，样式就能正常响应。