How to remove focus around buttons on click

Question

My buttons all have a highlight around them after I click them. This is in Chrome.

Answer 1

I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.

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

Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.

Answer 2

I found no solid answers that didn't either break accessibility or subvert functionality.

Perhaps combining a few will work better overall.

<h1
  onmousedown="this.style.outline='none';"
  onclick="this.blur(); runFn(this);"
  onmouseup="this.style.outline=null;"
>Hello</h1>

function runFn(thisElem) { console.log('Hello: ', thisElem); }

Answer 3

I was having the same problem using <a> acting as button and I discovered I was missing a workaround by adding attr type="button" makes it behave normally for me at least.

<a type="button" class="btn btn-primary">Release Me!</a>

Answer 4

Try this solution for remove border around the button. Add this code in css.

Try

button:focus{
outline:0px;
}

If not works then use below.

button:focus{
 outline:none !important;
 }

Answer 5

This worked for me. I created a custom class which overrides the necessary CSS.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

The -webkit-box-shadow will work for Chrome and safari browsers.

Answer 6

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

this outline:none will work for both button and a tag