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
Find the new Chrome border width and Chrome border color under Settings -> Themes -> pick a theme -> Chrome in the accordion menu. “Chrome” is what we call the bubble around the Userflow content. The tooltip notch (the little arrow) will automatically reflect your border color.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With