1

In my app, click on any button I am getting blue border around it. especially chrome. to remove this, I tried like this:

@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;
}

But not getting the result of outline removed. what is the wrong i did here? any one help me?

user2024080
  • 1
  • 14
  • 56
  • 96
  • 1
    This "thing" around buttons is not outline but box-shadow styled as outline. You should write `box-shadow: none !important;` and it should remove box-shadow. – Jakub Muda Feb 04 '19 at 06:39
  • Please [keep the focus outline](https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press), it's a very important information for keyboard users. Or at least [re-enable it](https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press) for them – FelipeAls Feb 04 '19 at 08:57

1 Answers1

1

Remove outline

You need to use:hover, :active, and visited pseudo-classes to remove the outline.

.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>

If the above code does not work, remove box-shadow. But I do not recommend doing so.

mahan
  • 12,366
  • 5
  • 48
  • 83