Google Chrome在按钮用户代理样式的焦点状态上显示黑色边框 [英] Google Chrome showing black border on focus state for button user agent styles

问题描述

最近，我正在从事一个网页设计项目，在最近一次Google Chrome更新之后，发现一些奇怪的事情。按钮的默认边框样式（用户代理样式）已更改，这对我来说看起来很烦人。

是否有任何方法可以修改/恢复默认浏览器样式，即永久性的用户代理样式？

以下是该问题的一些图片：

我还检查了其他网站，甚至谷歌

解决方案

这是因为新的Chrome更新
https://developers.google.com/web/updates/2020/05/nic83#forms

您可以在大多数情况下通过

  *，*：focus，*：hover {
 outline：none覆盖黑色轮廓; 
} 
  

您可以看到这篇文章

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

只想删除鼠标用户的轮廓。

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

解决方案

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.

这篇关于Google Chrome在按钮用户代理样式的焦点状态上显示黑色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！