Bootstrap复选框橙色背景、审查元素变蓝色样式异常如何解决

问题表现 #

• 基于Bootstrap框架开发的页面中，复选框存在橙色、蓝色两套背景样式冲突
• 正常访问页面时复选框显示为橙色背景，打开开发者工具执行审查元素操作时，复选框自动切换为蓝色背景
• 已尝试重载浏览器缓存、重启项目、为样式添加!important规则强制覆盖等方法，均未解决问题

根本原因 #

这个异常是样式权重匹配+元素状态触发时机共同导致的：

1. 页面初始加载时，未触发交互状态的复选框被自定义样式/第三方定制主题的橙色规则命中，因此显示橙色
2. 执行审查元素操作时，浏览器会自动给当前选中的DOM节点触发:focus聚焦状态，Bootstrap原生的蓝色焦点态样式选择器权重更高，直接覆盖了原有橙色样式——之前添加的!important如果没有绑定对应伪类选择器，就无法覆盖焦点态的蓝色规则
3. 大概率存在样式重复引入问题：同时加载了默认蓝色版Bootstrap资源和定制橙色主题资源，且样式引入顺序错误，导致不同交互状态下命中不同来源的样式规则

修复步骤 #

1. 调整样式引入顺序：将自定义橙色主题样式文件放在Bootstrap核心CSS文件之后引入，避免后加载的默认样式覆盖自定义规则
2. 提升自定义样式的选择器权重，同时覆盖所有交互状态，参考代码：

/* 匹配复选框全部交互状态，选择器权重高于Bootstrap默认规则 */
.form-check-input,
.form-check-input:checked,
.form-check-input:focus,
.form-check-input:hover {
  background-color: #替换为你需要的橙色色值 !important;
  border-color: #替换为你需要的橙色色值 !important;
  /* 覆盖Bootstrap焦点态默认蓝色外发光效果 */
  box-shadow: 0 0 0 0.25rem 替换为橙色对应的半透明色值 !important;
}

3. 打开开发者工具的Styles面板，分别查看两种显示状态下命中样式的来源文件，删除重复引入的冗余样式（比如多余的默认主题CSS中对应的复选框规则）
4. 如果使用Bootstrap 5及以上版本，检查html根标签或复选框父容器是否错误配置了data-bs-theme属性，导致主题切换逻辑异常

内容的提问来源于stack exchange，提问作者Jakub Radzik