因为浏览器限制原生checkbox/radio的CSS渲染，Bootstrap 4采用隐藏原生控件+伪元素模拟方案；须用.custom-control结构，通过修改::before/::after样式实现自定义。
为什么直接给 input[type="checkbox"] 或 input[type="radio"] 加样式没用？
因为浏览器对原生表单控件（尤其是 checkbox 和 radio）的渲染高度受限，width、height、background 等常规 CSS 几乎无效。Bootstrap 4 默认也是靠「隐藏原生控件 + 用伪元素模拟外观」来实现自定义样式的，所以你不能绕过它的结构逻辑直接改 input。
正确做法是：利用 Bootstrap 4 提供的 .custom-control 容器体系，覆盖其内置的 ::before 和 ::after 伪元素样式。
- 确保你的 HTML 结构包含
.custom-control、.custom-checkbox/.custom-radio类 - 原生
input必须紧跟在.custom-control-input类下，且后面紧接.custom-control-label - 所有自定义样式必须作用于
.custom-control-input::before（外框）和.custom-control-input::after（选中图标）
怎么改大小、颜色和选中图标？
Bootstrap 4 的尺寸基于 rem，默认外框宽高是 1.25rem（即 20px），图标是 SVG base64 编码。要修改，直接重写对应伪元素：
.custom-checkbox .custom-control-input:checked::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M3 5l-2-2 1.2-1.2L3 3.6l3.8-3.8L8 1z'/%3e%3c/svg%3e");
}
.custom-control-input::before {
width: 1.5rem;
height: 1.5rem;
top: 0.25rem; /* 垂直微调，避免和 label 文字错位 */
left: -1.5rem;
}
.custom-control-input::after {
width: 0.75rem;
height: 0.75rem;
top: 0.5rem;
left: -1.125rem;
}
- 改尺寸时，
::before和::after的width/height要同步调整，否则图标会溢出或偏移 - 改颜色：用
border-color控制未选中外框色，background-color控制选中后背景（仅对::after有效） - 换图标：替换
background-image中的 SVG data URL，注意 URL 编码（可用在线工具生成）
如何让自定义样式兼容 Bootstrap 4 的状态类（如 .is-invalid）？
Bootstrap 4 在表单验证失败时会给父容器加 .is-invalid，但默认只影响 .form-control，对 .custom-control 无作用。你需要手动扩展：
.is-invalid .custom-control-input::before {
border-color: #dc3545;
}
.is-invalid .custom-control-input:checked::before {
border-color: #dc3545;
background-color: #dc3545;
}
- 务必把选择器写成
.is-invalid .custom-control-input::before，而不是.custom-control-input.is-invalid::before—— 因为.is-invalid是加在父级.form-group或.custom-control上的 - 如果用了
.custom-control-inline，也要为它单独写一遍规则，否则内联布局下验证样式不生效 - 禁用状态（
:disabled）需额外处理：.custom-control-input:disabled::before和.custom-control-input:disabled:checked::after
为什么加了自定义 CSS 后点击没反应或 label 不联动？
最常见原因是 HTML 结构破坏或事件绑定失效。Bootstrap 4 的 .custom-control-label 依赖 for 属性或嵌套关系触发原生 input 的 click 事件：
- 检查
input是否有id，且label的for值是否匹配；或者确认input是否真的嵌套在label内部 - 不要给
.custom-control-label加pointer-events: none，否则点击穿透失效 - 避免在
.custom-control-input上设opacity: 0以外的隐藏方式（比如display: none或visibility: hidden），否则 input 完全不可交互 - 如果用了 JavaScript 动态插入表单，确保 DOM 插入后没有意外移除
input或打乱父子关系
真正麻烦的从来不是改几个像素或颜色，而是保持结构语义完整的同时，让浏览器仍能识别并触发原生表单行为 —— 这一点稍有松动，整个交互就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
