如何访问Bootstrap单选按钮以移除点击后的轮廓样式

我懂你遇到的这个头疼问题——用Bootstrap的btn-group做单选按钮组时，切换按钮总会跳出默认的轮廓线，找了半天也没找到能精准覆盖的选择器对吧？其实核心问题就是CSS选择器优先级不够，Bootstrap自带的聚焦样式优先级比你写的更高，咱们来一步步解决：

方案一：精准覆盖聚焦状态的样式 #

Bootstrap给聚焦的按钮不仅加了outline，还附带了box-shadow，所以要同时去掉这两个属性。你可以通过结合父元素btn-group来提升选择器优先级，不用!important也能生效：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');

.btn-group { 
  margin-top: 5px; 
  background-color: yellow; 
}

/* 覆盖Bootstrap的聚焦样式 */
.btn-group .btn:focus,
.btn-group .btn:active:focus,
.btn-group .btn.active:focus {
  outline: 0;
  box-shadow: none;
}

如果想更稳妥，还可以给你的按钮组加个自定义类（比如custom-radio-group），进一步提高选择器的特异性：

.custom-radio-group .btn:focus {
  outline: 0;
  box-shadow: none;
}

方案二：针对选中状态的按钮优化 #

如果是按钮被选中（Bootstrap会给选中按钮加.active类）时出现的轮廓，你可以专门针对这个状态写样式：

.btn-group .btn.active:focus {
  outline: 0;
  box-shadow: none;
}

为什么之前的尝试没效果？ #

Bootstrap的默认聚焦样式是这样的：

.btn:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

它的选择器优先级和你单独写的.btn:focus一样，这时候谁写在后面谁生效，但如果你的样式在Bootstrap样式之前引入，就会被覆盖。所以结合父元素的选择器能直接提升优先级，轻松覆盖默认样式。

最后小技巧：用浏览器F12开发者工具，选中按钮查看它的生效样式，就能直观看到是哪条CSS规则在控制轮廓线，这样你就能精准写出对应的覆盖选择器啦！

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