谷歌浏览器在按钮用户代理样式的焦点状态上显示黑色边框

Question

最近我在做一个网页设计项目，在最后一次谷歌浏览器更新后发现了一些奇怪的东西。按钮的默认边框样式（用户代理样式）已更改，这在视觉上对我来说很烦人。

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

这是问题的一些图像：

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

还检查了开发工具，发现这个边框样式应用于按钮的焦点状态

Answer 1

这是因为新的 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

如果您只想为鼠标用户删除轮廓。

Answer 2

您可以尝试禁用此标志： chrome://flags/#form-controls-refresh 

显然 83+ 版本的 chrome 改变了表单的呈现/处理方式：https ://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

这是一个相关的 Google 支持页面，它链接到上面的博客文章：https : //support.google.com/chrome/thread/48974735?hl=en

Answer 3

问题不在于 Chromium 的新对比对焦环，而是点击触发对焦环的浏览器的默认行为。

当<button>外观改变或接收tabindex属性时，焦点环会在点击时出现。

可访问性是必须的，新的对比鲜明的黑白对焦环是向前迈出的一大步。但是，有些开发人员（包括我）不希望在使用鼠标时出现对焦环。

解决方案

1. 焦点可见的 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;
}

如果您使用的是覆盖类的框架，请使用焦点可见属性。

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

2. :focus-visiblecss 伪选择器。Chrome 和 Firefox 现在支持此属性。目前 Safari 不支持。MDN 浏览器兼容性

/*
  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;
}

请记住，对于移动用户，如果有触发软键盘弹出的元素，例如<input type="text">，它应该有视觉指示，表明它已获得焦点。

Answer 4

有两种方法可以处理它。

1. chrome 中的配置很少有人建议。

2. 以编程方式进行outline: 0px transparent !important;风格或outline: none !important;两者都对我有用。

由于我们不能强迫用户进行配置，我建议使用第二个选项，但这是一个漫长的过程，如果您有任何更短的方法请告诉我们。