求助：使用outline:none无法移除Bootstrap按钮点击后的蓝色边框

嘿，我太懂你这种照着网上方法试了一遍又一遍却没效果的憋屈感了！之前我也遇到过一模一样的问题——明明加了outline:none，按钮点击后的蓝色边框就是顽固地留在那里。

其实问题出在：Bootstrap的按钮**焦点状态（focus）**的高亮样式，并不是用outline实现的，而是用了box-shadow属性！这就是为什么你加outline:none完全没用的原因。

下面给你几个靠谱的解决办法，按顺序试就行：

方法1：直接覆盖Bootstrap的.btn:focus样式 #

这是最通用的方案，直接针对所有Bootstrap按钮的焦点状态修改：

.btn:focus {
  /* 移除Bootstrap默认的焦点阴影 */
  box-shadow: none;
  /* 保险起见加上这行，防止部分老旧浏览器用outline做 fallback */
  outline: none;
}

方法2：用更具体的选择器提升优先级 #

如果上面的代码没生效，大概率是你的CSS选择器优先级不够（比如你给按钮加了自定义类，或者Bootstrap的样式在你的CSS之后加载）。这时候可以用更具体的选择器，甚至临时用!important（虽然不推荐滥用，但紧急情况下很管用）：

/* 假设你的按钮有自定义类"my-custom-btn" */
.btn.my-custom-btn:focus {
  box-shadow: none !important;
  outline: none !important;
}

方法3：针对特定按钮类型（比如primary、secondary） #

如果你只想移除某一类按钮的焦点边框，比如只改primary按钮：

.btn-primary:focus {
  box-shadow: none;
  outline: none;
  /* 如果你连背景色变化也想去掉，可以加上这行 */
  /* background-color: #0d6efd; */
}

小提醒 #

• 注意CSS的加载顺序：你的自定义CSS文件一定要放在Bootstrap的CSS文件之后，这样你的样式才能覆盖默认样式。
• 不要随便去掉所有按钮的焦点样式！这会影响键盘导航的可访问性，如果你只是觉得默认样式丑，可以换成更友好的焦点样式（比如浅色边框、不同的背景色），而不是完全移除。

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