使用CSS的:checked伪类和::after伪元素可在复选框或单选按钮选中时显示自定义对勾图标；2. 通过隐藏原生input，利用label模拟控件外观，并在选中状态下通过伪元素插入对勾符号；3. 可结合transform、border技巧和transition优化视觉效果，实现平滑动画与精致样式。
使用CSS的:checked伪类和::after伪元素，可以实现复选框或单选按钮选中时显示自定义对勾图标的效果。这种方法无需额外HTML标签，完全通过CSS控制视觉表现。
基本原理
:checked 用于匹配被选中的表单元素（如input[type=checkbox]或input[type=radio]）。::after 是一个伪元素，可在选中状态后插入装饰性内容。将两者结合，可以在用户点击选择后显示对勾等图标。
HTML结构
使用一个隐藏的原生input，搭配label来实现可点击区域：
CSS样式设置
通过CSS隐藏原始输入框，用label模拟成可视化控件，并在选中时显示对勾：
立即学习“前端免费学习笔记（深入）”；
.hidden-checkbox {
display: none;
}
.custom-checkbox {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #999;
border-radius: 4px;
position: relative;
cursor: pointer;
}
.hidden-checkbox:checked + .custom-checkbox::after {
content: '✓';
font-size: 18px;
color: #4CAF50;
position: absolute;
top: -2px;
left: 3px;
}
增强视觉效果
可以进一步优化对勾样式，例如使用伪元素绘制更精致的路径，或添加过渡动画：
- 使用
transform让对勾出现时有缩放动效 - 用
border技巧绘制对勾，避免依赖字体符号 - 配合
transition实现平滑变化
基本上就这些。利用:checked与::after组合，能轻松打造美观且可访问的自定义选中图标，不复杂但容易忽略细节。
