Bootstrap 4.2.1-如何覆盖按钮轮廓？

Question

在我的应用中，单击我周围有蓝色边框的任何按钮。 特别是铬。 为了删除这个，我尝试这样：

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints.scss';
@import 'global.scss';
@import "~bootstrap/scss/bootstrap";

$grid-breakpoints: (
    sm: 768px,
    md: 768px,
    lg: 1024px
);

$container-min-widths: (
  sm: 768px,
  md: 768px,
  lg: 1024px
);

//resets;-

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
.wrapper.container-fluid{
    min-height: 100%;
    padding:0;
    margin: 0;
}

.btn:focus,.btn:active { //but not works!!
   outline: none !important;
   box-shadow: none;
}

但不能删除大纲的结果。 我在这里做错了什么？ 有人帮我吗？

Answer 1

删除outline

您需要使用:hover ， :active和visited伪类来删除轮廓。

 .btn-sm, .btn-sm:hover, .btn-sm:active, .btn-sm:visited { outline: none !important; border: none; cursor: pointer; } 

 <button class="btn btn-sm btn-bordered">Button</button> <button class="btn btn-lg btn-bordered">Button</button> 

---

如果以上代码不起作用，请删除box-shadow 。 但我不建议这样做。