隐藏原生控件并用label模拟点击区域，2. 利用:checked + label和伪元素实现选中样式，3. 单选框通过border-radius设为圆形，4. 添加hover、focus提升交互体验，核心是CSS状态控制与视觉替换。
要制作自定义复选框和单选框，核心思路是隐藏默认的表单控件，利用CSS伪类和标签关联来创建美观的自定义样式。通过结合 :checked 伪类和相邻兄弟选择器（+），可以实现点击切换视觉效果。
1. 隐藏原生控件并建立结构
使用透明度或绝对定位将原生 input 隐藏，保留其功能。用 label 模拟可点击的图形部分。
示例HTML结构：<div class="checkbox-group"> <input type="checkbox" id="custom-checkbox" /> <label for="custom-checkbox" class="custom-checkbox"></label> <span>同意条款</span> </div>
隐藏 input 的常用方法：
input[type="checkbox"] {
opacity: 0;
position: absolute;
width: 0;
height: 0;
}
2. 创建自定义外观
为 label 设置边框、尺寸和背景，模拟复选框的未选中状态。
立即学习“前端免费学习笔记（深入）”；
.custom-checkbox {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 4px;
cursor: pointer;
background-color: white;
transition: all 0.2s ease;
}
当 checkbox 被选中时，通过 :checked + label 改变样式：
#custom-checkbox:checked + .custom-checkbox::after {
content: '✔';
display: block;
text-align: center;
font-size: 14px;
line-height: 18px;
color: #4CAF50;
}
3. 单选框的实现方式
单选框逻辑类似，只是视觉上通常为圆形。
.custom-radio {
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 50%;
cursor: pointer;
}
#custom-radio:checked + .custom-radio::after {
content: '';
display: block;
width: 10px;
height: 10px;
margin: 3px;
border-radius: 50%;
background-color: #2196F3;
}
注意：每个单选组需有相同的 name 属性，并确保 label 正确绑定 id。
4. 增强交互体验
加入悬停和聚焦状态提升可用性：
- 添加 hover 效果让边框颜色加深
- 使用 focus-visible 处理键盘导航
- 对勾动画可用 transform 缩放实现平滑出现
.custom-checkbox:hover {
border-color: #888;
}
#custom-checkbox:focus + .custom-checkbox {
outline: 2px solid #0066cc;
}
基本上就这些。关键是理解如何用CSS控制表单状态，结合 label 和伪元素完成视觉替换，既保持语义化又提升界面美观。 
