通过隐藏原生复选框并结合:checked与::before伪元素，可自定义复选框样式。1. 使用appearance: none隐藏默认样式；2. 利用::before创建带边框的方块作为外观；3. 在:checked状态下改变背景色并显示对勾；4. 可选使用::after绘制更精确的对勾图形，实现美观且兼容的自定义效果。
想要美化复选框的选中效果，可以通过隐藏原生复选框，利用 :checked 伪类和 ::before（或 ::after）伪元素来自定义样式。这种方法灵活、兼容性好，适合在表单或交互组件中使用。
1. 隐藏原生复选框
原生的复选框样式难以直接修改，因此第一步是将其隐藏，再用自定义内容替代显示：
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
outline: none;
}
使用 appearance: none 可以去除浏览器默认样式，为后续自定义铺路。
2. 使用 ::before 创建自定义外观
通过 ::before 伪元素绘制一个视觉上的“复选框”，比如一个边框方块：
立即学习“前端免费学习笔记（深入）”；
input[type="checkbox"]::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: white;
}
这个伪元素会作为复选框的“外壳”出现在页面上。
3. 利用 :checked 改变选中状态样式
当复选框被选中时，使用 :checked 结合 ::before 来改变外观，比如添加对勾或背景色：
input[type="checkbox"]:checked::before {
background-color: #007bff;
border-color: #007bff;
content: "✔";
color: white;
font-size: 12px;
text-align: center;
line-height: 16px;
}
此时，选中状态下会显示一个白色对勾，视觉效果更现代。
4. 可选：使用图标字体或伪元素绘制对勾
如果不想直接写“✔”，可以用 Unicode 字符或 CSS 边框模拟对勾：
/* 使用边框模拟对勾 */
input[type="checkbox"]:checked::before {
content: "";
position: relative;
background-color: #007bff;
border: none;
}
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
这种方式更可控，适合需要精细设计的场景。
基本上就这些。通过组合 :checked 和 ::before，你可以完全掌控复选框的视觉表现，让表单看起来更专业、更符合项目风格。不复杂但容易忽略细节，比如伪元素的定位和尺寸适配。
