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

问题

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 changed, and which is looking visually annoying to me.

Is there any method to modify/restore the default browser styles, i.e., user agent styles permanently?

here are some images of the problem:

i have also checked other websites and even google

also checked the dev tool, found this border styles applied on the focus state of the button

回答1:

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

Apparantly 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

回答2:

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.

回答3:

This solved it for me:

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

And disable this: screenshot

来源：https://stackoverflow.com/questions/61992025/google-chrome-showing-black-border-on-focus-state-for-button-user-agent-styles