如何修改Bootstrap 4中按钮点击后的蓝色轮廓颜色

那个蓝色轮廓是浏览器给处于:focus状态的元素添加的默认焦点样式，目的是提升可访问性——方便使用键盘导航的用户识别当前聚焦的元素。直接去掉它可不是个好主意，但我们可以轻松修改它的颜色，下面是几种实用的方法：

方法1：自定义outline样式（最直接） #

你可以通过CSS给按钮的:focus状态设置自定义的outline属性，替换默认的蓝色。因为你的按钮用了Bootstrap的btn btn-lg btn-primary类，我们可以用这个类名来精准定位元素：

.btn.btn-lg.btn-primary:focus {
  /* 替换成你想要的颜色，比如#ff6b6b（珊瑚红） */
  outline: 2px solid #ff6b6b;
  /* 可选：调整轮廓和按钮边缘的间距，让样式更美观 */
  outline-offset: 2px;
}

这个带多个类的选择器优先级足够覆盖Bootstrap的默认样式，不需要依赖!important这种粗暴的方式。

方法2：用box-shadow模拟焦点样式（更灵活） #

如果你想要带模糊效果的焦点样式，可以用box-shadow替代默认的outline，记得先去掉原来的outline：

.btn.btn-lg.btn-primary:focus {
  outline: none;
  /* 这里的rgba值可以自定义：红、绿、蓝、透明度，比如绿色半透明 */
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.5);
}

这种方式的好处是可以做出更柔和的视觉效果，同时不会影响页面布局（outline和box-shadow都不占据额外空间）。

方法3：优化焦点样式的显示时机（现代浏览器） #

如果不想让鼠标点击按钮时显示轮廓，只在键盘导航时显示，可以用:focus-visible伪类（现代主流浏览器都支持），这是更友好的可访问性实践：

/* 键盘导航聚焦时显示自定义轮廓 */
.btn.btn-lg.btn-primary:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}
/* 鼠标点击聚焦时去掉默认轮廓 */
.btn.btn-lg.btn-primary:focus:not(:focus-visible) {
  outline: none;
}

小提醒 #

尽量不要把样式写在元素的style属性里（像你现在的按钮那样），把CSS统一放在<style>标签或者外部样式文件里，后续维护起来会方便很多。

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