Bootstrap 4中如何移除input元素聚焦时的蓝色外边框？

Bootstrap 4项目中，点击input输入框触发焦点状态时，元素外围会出现一圈默认蓝色边框，需要移除或自定义该边框样式。
对应的页面结构代码：

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" 
   aria-label="Recipient's username" aria-describedby="basic-addon2">
   <div class="input-group-append">
       <button type="button" class="btn btn-outline-primary mb- 2">Subscribe</button>
    </div>
</div>

此前编写的CSS仅移除了输入框内部边框，外围蓝色边框未生效，使用的样式代码如下：

.input:focus {
  outline: none !important;
}

样式不生效是两个问题导致的：

• 选择器匹配错误：输入框的类名是form-control，不是input，写的样式根本没有命中目标DOM元素
• 样式属性搞错了：Bootstrap 4的焦点蓝色边框不是通过outline属性实现的，是给焦点状态的表单元素加了box-shadow发光效果，只清除outline完全没用

完全移除焦点边框 #

直接覆盖Bootstrap的默认焦点样式，同时清除outline和box-shadow即可：

.form-control:focus {
  outline: 0 !important;
  box-shadow: none !important;
  /* 如果要保留边框、只去掉蓝光，可加上自定义边框色，比如border-color: #ced4da; 就是默认未选中的灰色 */
}

如果需要一并移除输入组旁边按钮的焦点边框，追加以下样式：

.btn:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

自定义焦点边框样式 #

如果不需要完全移除，只是想替换默认蓝色，直接修改边框色和阴影色值即可，比如改成绿色焦点效果：

.form-control:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

提示：如果你的自定义CSS引入顺序在Bootstrap的CSS文件之后，可以省略样式里的!important声明。

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