Bootstrap 5 默认 Checkbox 选中颜色为 #0d6efd，定义在 .form-check-input:checked 的 background-color 中；该值复用 --bs-primary 但未通过 CSS 变量动态控制，需直接覆盖该选择器的 background-color 和 border-color 并加 !important 确保生效。
Bootstrap 5 默认 Checkbox 选中颜色在哪定义
bootstrap 5 的表单控件样式完全基于 css 变量和本地类控制，checkbox 的选中状态（✔）颜色由 --bs-form-control-indeterminate-color 和 --bs-form-control-focus-color 等变量间接影响，但真正渲染勾选图标的颜色来自 background-color 和 border-color 的组合。默认情况下，选中时的背景是 #0d6efd（primary 蓝），这个值直接绑定在 .form-check-input:checked 的 background-color 上。
你不能只改变量就生效——因为 Bootstrap 没有为 checkbox 图标单独暴露一个 --bs-checkbox-color 变量；它复用了 --bs-primary，且硬编码在 CSS 规则里。
覆盖 .form-check-input:checked 的 background-color 最直接
最稳妥、兼容性最好、也最容易调试的方式，就是用自定义 CSS 强制重写选中态背景色。注意必须加 !important（除非你用更高优先级选择器），因为 Bootstrap 的原始规则带 :checked 伪类且 specificity 较高。
- 把这段代码加到你的
<style>或 CSS 文件末尾（确保加载顺序在 Bootstrap 之后）：
.form-check-input:checked {
background-color: #dc3545 !important;
border-color: #dc3545 !important;
}
这里用了 Bootstrap 的 danger 色（#dc3545），你可换成任意十六进制、RGB 或命名色。同时改 border-color 是为了保持边框与填充一致，否则会出现蓝边红底的错位感。
- 如果只想改某一个 checkbox，给它加个 class，比如
form-check-input-red，然后写：
.form-check-input-red:checked {
background-color: #dc3545 !important;
border-color: #dc3545 !important;
}
用 CSS 变量配合 :root 覆盖（仅限 Bootstrap 5.3+）
Bootstrap 5.3 开始支持通过 CSS 变量批量定制表单控件颜色，但仅对 .form-check-input 的 accent-color 属性有效——而这个属性**只控制原生 checkbox 的高亮色（即 Safari/Chrome 新版的“圆点”或“滑块”外观），不控制 Bootstrap 自绘的 ✔ 图标**。所以：
-
accent-color对 Bootstrap 的.form-check-input**无效**（它已被appearance: none移除原生样式） - 如果你用的是纯
<input type="checkbox">且没引入 Bootstrap 表单类，那:root { --bs-primary: #dc3545; }才会起作用 - 别试图靠改
--bs-primary来影响 checkbox 图标——它只影响按钮、链接、部分边框等，不穿透到.form-check-input:checked的 background
为什么用 background-image 替换图标容易出问题
有人想用 background-image: url("data:image/svg...") 完全替换勾选图标，这理论上可行，但实际踩坑多：
- SVG 内联 base64 容易因转义或空格被截断，导致图标不显示
- 必须手动处理
:indeterminate状态（如父级 checkbox 半选），否则半选时空白 - 需要额外重置
background-size、background-position和padding-left，否则图标和文字错位 - 移动端点击热区可能变小，需补
min-height和min-width
除非你有强定制需求（比如品牌 icon），否则纯色替换更稳。
真正要注意的其实是：Bootstrap 的 checkbox 样式依赖于 .form-check-input 和 .form-check-label 的结构配对，任何脱离这个 DOM 结构的写法（比如自己写 <span> 模拟勾选）都会让 CSS 规则失效——这不是颜色问题，是根本没匹配上选择器。
