Bootstrap 5输入框聚焦蓝色边框无法去除，求解决方案

你的问题出在没覆盖Bootstrap默认的.form-control:focus样式——除了box-shadow，Bootstrap还通过border-color实现聚焦时的蓝色边框，且你的选择器优先级不足以覆盖框架样式。

修改后的CSS代码 #

.input-group .form-control:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #ced4da; /* 还原为输入框未聚焦时的默认边框色，可替换为你需要的颜色 */
}

关键说明 #

• 必须覆盖border-color：Bootstrap聚焦状态下会强制修改输入框边框颜色，仅清除box-shadow和outline无法移除蓝色边框
• 保证自定义CSS加载顺序：你的样式文件要放在Bootstrap官方CSS之后引入，才能覆盖默认样式
• 提升选择器优先级：.input-group .form-control:focus的优先级高于单纯的.form-control:focus，能更稳定地覆盖框架样式

你的原始HTML代码（无需修改） #

<div class="container">
<div class="row">
    <div class="col-12">
        <div class="input-group flex-nowrap mt-5">
            <span class="input-group-text" id="addon-wrapping">@</span>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
        </div>
    </div>
</div>
</div>

内容的提问来源于stack exchange，提问作者Serhii Prudkyi