Google Chrome showing black border on focus state for button user agent styles

Question

Recently i was working on a web design project, and noticed something odd, after the last Google Chrome update. The default border style(user agent style) for button is chan

Answer 1

The issue isn't Chromium's new contrasting focus ring, it's the default behavior across browsers that clicking triggers the focus ring.

The focus ring appears on click when the appearance is altered or receives tabindex attribute.

Accessibility is a must and the new contrasting black and white focus ring is a great step forward. However there are developers (including me) that don't want the focus ring to be present when using the mouse.

Solutions

1. focus-visible polyfill

/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

if you're using a framework that overrides classes, use the focus visible attributes.

[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
  outline: none;
}

2. :focus-visible css pseudo selector, however it is currently only supported in Chrome behind a flag

/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/

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

Keep in mind that for mobile users, if there's an element that triggers the soft keyboard to pop up, such as , it should have visual indication that it is focused.