Bootstrap 4单选按钮在Edge浏览器显示黑色如何修改为蓝色

使用Bootstrap 4开发时，单选按钮在Chrome中默认显示蓝色、在Edge中显示黑色的问题，是浏览器原生表单控件默认样式差异导致的，可通过两种方式将Edge下的单选按钮修改为和Chrome一致的蓝色，无需修改Bootstrap核心配置。

不同浏览器默认效果对比 #

• Chrome下默认效果：
  
• Edge下默认效果：
  

具体实现方法 #

方法1：CSS自定义样式覆盖（侵入性最低） #

直接追加自定义CSS，针对不同内核浏览器重置单选按钮选中色即可，代码全局生效：

/* 兼容Chrome、新版Edge、Safari等Webkit内核浏览器 */
input[type="radio"]:checked {
  accent-color: #007bff;
}

/* 兼容旧版Edge、IE浏览器 */
input[type="radio"]::-ms-check {
  border-color: #007bff;
  color: #007bff;
  background: #ffffff;
}

注意：accent-color属性兼容性覆盖Chrome 93+、Edge 93+、Safari 15.4+版本，若需要兼容更低版本浏览器，优先选择方法2实现。#007bff为Bootstrap 4默认primary主题蓝色值，若项目自定义过主题色，替换为对应色值即可。

方法2：使用Bootstrap 4自带自定义表单组件 #

Bootstrap 4内置了不依赖浏览器原生样式的自定义单选组件，天然实现跨浏览器样式统一，无需额外写兼容CSS，用法如下：

<div class="form-check">
  <input class="form-check-input" type="radio" name="demoRadio" id="demoRadio1" value="1" checked>
  <label class="form-check-label" for="demoRadio1">
    单选选项1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="demoRadio" id="demoRadio2" value="2">
  <label class="form-check-label" for="demoRadio2">
    单选选项2
  </label>
</div>

使用上述结构编写的单选按钮，所有浏览器下选中态均为统一的Bootstrap主题蓝色，不会出现原生样式的颜色差异。

内容的提问来源于stack exchange，提问作者PPM KANNAN