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

This solved it for me:

chrome://flags/#form-controls-refresh

And disable this: screenshot

Answer 2

You could try disabling this flag: chrome://flags/#form-controls-refresh 

Apparently the 83+ version of chrome changed how forms are rendered / handled: https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

Here is a relevent Google Support page which links to the blog post above: https://support.google.com/chrome/thread/48974735?hl=en

Answer 3

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 <button> 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 <input type="text">, it should have visual indication that it is focused.

Answer 4

This is because the new chrome update https://developers.google.com/web/updates/2020/05/nic83#forms

you can override black outline in most cases by

*,*:focus,*:hover{
    outline:none;
}

and you can see this article

https://web.dev/style-focus/#use-:focus-visible-to-selectively-show-a-focus-indicator

if you want to remove outline just for mouse user.

Answer 5

There are 2 way to handle it.

1. configuration in chrome which few has suggested.

2. Programmatically approach outline: 0px transparent !important; in style Or outline: none !important; Both have worked for me.

Since we can't force user to do configuration, I would suggest for second Option but it is long process If you have any shorter way tell us.