如何修改Bootstrap 4单选按钮被点击选中时的默认背景颜色

你当前的CSS只设置了选中状态的背景色，还需要同步修改边框颜色，同时要保证你的自定义CSS加载顺序晚于Bootstrap官方CSS文件，才能正确覆盖默认样式。

调整后的完整CSS如下：

.form-check .form-check-input:checked {
    background-color: green !important;
    border-color: green !important;
}

如果需要修改单选按钮中间的选中圆点样式，可以额外添加background-image属性自定义，以下示例保留默认白色圆点效果，可根据需求调整填充色：

.form-check .form-check-input:checked {
    background-color: green !important;
    border-color: green !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

如果不想使用!important，也可以通过提升选择器权重实现覆盖，示例如下：

div.form-check input.form-check-input:checked {
    background-color: green;
    border-color: green;
}

内容的提问来源于stack exchange，提问作者sudip chand