bootstrap复选框默认样式不能直接用input[type="checkbox"]修改，因其被设为opacity:0且绝对定位隐藏，实际显示由相邻label的::before/::after伪元素实现。
Bootstrap复选框默认样式为啥不能直接用input[type="checkbox"]改？
因为 Bootstrap 5+ 默认把 <input type="checkbox"> 设为 opacity: 0 并绝对定位藏起来，真正显示的是紧邻的 <label></label> 里的伪元素（::before/::after）。直接给 input 写 appearance: none 或改边框，根本没效果——它压根不渲染。
实操建议：
- 别碰
input的外观，只操作它后面那个label和它的伪元素 - 确保 HTML 结构是
<input id="x"><label for="x">文字</label>，否则for/id关联断了，点击无效 - Bootstrap 的自定义 checkbox 类名是
form-check-input（input）和form-check-label（label），但样式锚点得落在 label 上
用::before和::after配合content画勾选图标
核心思路：用 label::before 画方框，label::after 在勾选时显示对勾（或叉、圆点等），靠 input:checked + label::after 触发状态切换。
常见错误现象：
-
content: "✓"在某些字体下显示模糊或偏移——改用 SVG 路径或 Unicode ✅（\2713）更稳 - 没设
position: absolute和top/left，图标飘在文字开头而不是覆盖方框里 - 忘记给
label::before设display: inline-block，导致宽高失效
简短示例（适配 Bootstrap 5）：
label.form-check-label::before {
content: "";
display: inline-block;
width: 1.2em;
height: 1.2em;
border: 2px solid #6c757d;
margin-right: 0.5em;
vertical-align: -0.25em;
}
input.form-check-input:checked + label.form-check-label::after {
content: "\2713";
position: absolute;
left: 0.25em;
top: 0.1em;
font-size: 1em;
color: #0d6efd;
}
为什么input:checked + label::after有时不生效？
这是 CSS 选择器链断裂最常踩的坑。Bootstrap 的实际结构往往带 wrapper 容器（比如 <div class="form-check">
<input><label></label>
</div>），导致 input 和 label 不再是「相邻兄弟」，而是「父子嵌套」关系。
使用场景判断：
- 如果 HTML 是
<div class="form-check"> <input><label></label> </div>→ 必须用input:checked ~ label::after（波浪号，后代兄弟） - 如果用了
form-check-inline，label 可能被包裹进 span，需 inspect 元素确认层级 - Bootstrap 4 和 5 的 class 名一致，但 5 移除了部分旧样式重置，若混用 CDN 版本，
label的padding-left可能干扰图标定位
SVG 图标比 Unicode 更可控，但要注意尺寸和颜色继承
用 content: url("data:image/svg+xml,...") 插入 SVG，能自由控制线条粗细、圆角、动画，但容易忽略两点：
- SVG 中的
fill值写死（如fill="%230d6efd"）会导致无法随主题色动态变化；推荐用fill="currentColor"，然后靠color属性驱动 - Base64 编码的 SVG 要 URL encode 特殊字符（
→ <code>%3C，>→%3E），否则整个content失效，控制台无报错，只默默不渲染 - SVG 宽高默认按容器缩放，若没设
width/height在::before上，可能被压扁
事情说清了就结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
