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

OPTION 1: Use the :focus-visible pseudo-class

The :focus-visible pseudo-class can be used to kill the unsightly outlines and focus rings on buttons and various elements for users that are NOT navigating via keyboard (i.e., via touch or mouse click).

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Warning: As of 2020, the :focus-visible pseudo-class is not widely supported across browsers. However the polyfill is very easy to use; see instructions below.

OPTION 2: Use the .focus-visible polyfill

This solution uses a normal CSS class instead of the pseudo-class mentioned above, and has wide browser support because it is an official Javascript-based polyfill.

Step 1: Add the Javascript dependencies to your HTML page

Note: the focus-visible polyfill requires an additional polyfill for several older browsers that don't support classList:

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

Step 2: Add the following CSS to your stylesheet

The following is a modified version of the CSS solution documented more thoroughly above.

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Step 3 (optional): use 'focus-visible' class where necessary

If you have any items where you actually do want to show the focus ring when someone clicks or uses touch, then just add the focus-visible class to the DOM element.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Resource:

• https://css-tricks.com/keyboard-only-focus-styles/

Demo:

• https://wicg.github.io/focus-visible/demo/

Answer 2

my understanding is that the focus is first applied following the onMouseDown event, so calling e.preventDefault() in onMouseDown may be a clean solution depending on your needs. This is certainly an accessibility friendly solution, but obviously it adjusts the behaviour of mouse clicks which may not be compatible with your web project.

I am currently using this solution (within a react-bootstrap project) and I do not receive a focus flicker or retained focus of buttons after a click, but I am still able to tab my focus and visually visualize the focus of the same buttons.

Answer 3

Style

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

Using

<button class="btn btn-primary not-focusable">My Button</button>

Answer 4

Another possible solution is to add a class using a Javascript listener when the user clicks on the button and then remove that class on focus with another listener. This maintains accessibility (visible tabbing) while also preventing Chrome's quirky behaviour of considering a button focused when clicked.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Full example here: https://jsfiddle.net/4bbb37fh/

Answer 5

Late, but who knows it may help someone. The CSS would look like:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

The HTML would look like:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

This way you can keep btn and it's associated behaviors.

Answer 6

You can set tabIndex="-1". It will make browser to skip this button when you TAB through focusable controls.

Other "fixes" suggested here, only remove focus outline, but still leaves buttons tabable. However, from usability point of view, you already removed glow, so your user won't know what is currently focused button, any way.

On other hand, making button non-tabable have accessibility implications.

I'm using it to remove focus outline from X button in bootstrap modal, which have duplicate "Close" button at the bottom any way, so my solution have no impact on accessibility.