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 just had this same problem on MacOS and Chrome while using a button to trigger a "transition" event. If anyone reading this is already using an event listener, you can solve it by calling .blur() after your actions.

Example:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Though if you're not using an event listener already, adding one just to solve this might add unnecessary overhead and a styling solution like previous answers provide is better.

Answer 2

.btn:focus:active {
  outline: none;
}

this removes the outline on click, but keeps the focus when tabbing (for a11y)

Answer 3

This works for me, another solution not mentioned. Just throw it in the click event...

$(this).trigger("blur");

Or call it from another event/method...

$(".btn_name").trigger("blur");

Answer 4

If the above doesn't work for you, try this:

.btn:focus {outline: none;box-shadow: none;border:2px solid transparent;}

As user1933897 pointed out, this might be specific to MacOS with Chrome.

Answer 5

I've noticed the same and even though it really annoys me, I believe there is no proper way of handling this.

I would recommend against all the other solutions given because they kill the accessibility of the button completely, so now, when you tab to the button, you won't get the expected focus.

This should be avoided!

.btn:focus {
  outline: none;
}

Answer 6

I found a solution simply add below line in your css code.

button:focus { outline: none }