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.Но я не рекомендую это делать.