How to remove focus around buttons on click

Still focused? Understand the concept

The purpose of focus

Buttons display the focus styles as a form of visual feedback. This plays a vital role for navigation as it indicates which field the system is interacting with.

Weighing up aesthetics and accessibility

While it may be tempting to get rid of focus styles for a cleaner look, they are essential tools for those who rely on the keyboard to interact with your website. Hence, be careful not to compromise accessibility for aesthetics.

Custom styling for focus

Instead of removing the focus entirely, consider restyling it to better compatible with your design. Implement changes to outline or background using the :focus pseudo-class.

button:focus {
  outline: 2px solid #007BFF;  /* Focus ring gets a stylist, goes Blue! */
  background-color: #E9ECEF;  /* Focus background switches to neutral */
}


Advanced maneuvers to control focus

Persistent Highlight? Overpower it

Are you wondering why the focus outline persists despite going outline:none; on it? It is the result of the browser or the framework (like Bootstrap) forcefully applying their styles. To assert your styles, increase the specificity of your selector.

/* Stronger than Thor's hammer - more specific Bootstrap rule */
.btn-primary:focus { 
  outline: none !important;
  box-shadow: none;
}


JavaScript’s magic wand: onclick

Avoid focus state upon click by employing JavaScript: blur the button in the onclick event.

<button onclick="this.blur();">Who needs autoFocus anyway!</button>


Differentiating mouse and keyboard with .focus-visible

Apply the .focus-visible class with a polyfill to differentiate between mouse and keyboard interactions, displaying focus styles only when required.

button:focus:not(.focus-visible) { 
  outline: none;
}


Keyboard for focus, Mouse for fun: Do it with onMouseDown

Using onMouseDown paired with e.preventDefault() you can prevent focus upon mouse clicks while preserving it for keyboard.

button.onmousedown = function(e) {
  e.preventDefault(); // Mouse says yes, Keyboard says no
}


Put the theory to practice

Embark on hands-on experiential learning at:

[jsfiddle.net/hkjrztwe/](jsfiddle.net/hkjrztwe/) 

Zach's guide – when focus meets design

Customizing focus - Your Style

Use :focus in your CSS to add your unique touch to the focus styles. Consider the :focus-within for nested interactive elements.

Keyboard v/s Mouse - Dawn of Navigation

Discriminate between keyboard and mouse navigation. Use focus outlines only for the keyboard, and create a separate, subtle effect for mouse clicks.

Keeping it accessible

Split your design’s dependence on visual cues such as color. Improve contrast ratios and integrate other assistive technologies like WAI-ARIA attributes for better accessibility.