Bootstrap5中如何移除带form-control类输入框的聚焦蓝色边框

原因说明 #

Bootstrap 5 的.form-control类的聚焦蓝色高亮效果，并非通过outline属性实现，而是通过修改border-color和添加box-shadow阴影实现，仅设置outline: none无法移除该效果。

解决方法 #

修改你的自定义.settings-input聚焦样式，补充对应的属性覆盖Bootstrap默认规则即可：

.settings-input:focus {
    outline: none;
    box-shadow: none;
    /* 可按需设置为你需要的边框颜色，默认值为#ced4da */
    border-color: #ced4da;
}

注意事项 #

• 确保你的自定义样式文件引入顺序在Bootstrap样式文件之后，保证自定义样式优先级足够覆盖默认规则
• 若样式仍未生效，可通过浏览器开发者工具查看元素聚焦状态的样式优先级，调整选择器权重即可，非必要不建议使用!important强制覆盖

内容的提问来源于stack exchange，提问作者Thavas Antonio