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

Posted 2023-03-07

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

【英文标题】：Google Chrome showing black border on focus state for button user agent styles

【发布时间】：2020-09-11 11:28:55

【问题描述】：

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

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

这里有一些问题的图片：

我也查过其他网站，甚至谷歌

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

【问题讨论】：

黑线可以是边框、轮廓、阴影等吗？您可以尝试将每个按钮设置为 none 并查看该行是否消失。

这完全毁了我的应用程序，看起来很糟糕。但我想它是可以覆盖的，但对于所有不想升级的客户来说，它很糟糕:(

@JGoodgive 我认为 chrome 应该为元素的焦点/活动状态回滚这个视觉更新，注意到外观上还有其他变化，更改了默认日期选择器日历的样式，新的复选框设计，吸引人的复选框用于开发工具检查器中的样式规则

是的，这很容易获得，但它应该作为附加功能呈现。默认不启用功能

2021 年 3 月。“新的 :focus-visible 伪类将在元素获得焦点并且浏览器通过启发式方法确定显示焦点指示器对用户有益的任何时候应用。” web.dev/style-focus/…。今天，我通过 [CTRL+S] 保存了大约 50 个 google 的缓存网页（两天前 OVH 服务器被烧毁，150,000 个网站宕机）。现在我让这个 焦点指示器 激活了关于如何停用它的 NO WAY NOR HINT。禁用 chrome://flags/#form-controls-refresh 失败。

【参考方案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

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

【讨论】：

这种风格对新项目很有用，需要考虑那些已经完成的项目。我认为谷歌应该默认禁用这个新的样式功能，目前是自动启用的。如果用户必须使用此链接标志手动打开此新功能会很好：chrome://flags/#form-controls-refresh

并非所有更改都令人讨厌，其中一些看起来不错。但这不应该在默认情况下自动启用。

这对可访问性不利。有很多只有视力的键盘用户，并且取消焦点样式是有问题的。

@Jason 默认启用“新样式”是有问题的，而不是使用 CSS 禁用它们。每个看到这个黑色边框的网页设计师都会要求网页开发人员修复它。如果选择加入，没有人会知道，有视力问题的用户可以享受黑色边框。现在这些黑色边框只是成为问题跟踪器中的“错误”，就像 IE 中链接中的图像边框一样。无论哪种方式，作为一个确实使用焦点并且可以享受这些边框的人，我发现 Chrome 中的控制焦点几乎无法使用。

我还需要添加!important 才能使其工作。

【参考方案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

【讨论】：

我认为谷歌应该回滚这个更新，因为这个解决方案仅限于我的机器/系统/仅。网站的最终用户也必须在其系统中更新此设置。

或者也许 google 应该只使用不同的颜色而不是黑色，让它像以前的蓝色一样？嗯，这很容易解决哈哈。

对于任何 Google Chrome 最终用户（只想查看旧样式的用户），禁用 form-controls-refresh 即可。

您能否提供指向您所说的 Google 支持页面的链接？

嘿詹姆斯。给你support.google.com/chrome/thread/48974735?hl=en。虽然我现在找不到原来的解决方案。

【参考方案3】：

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

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

辅助功能是必须的，新的对比黑白对焦环是向前迈出的一大步。但是有些开发者（包括我）不希望在使用鼠标时出现对焦环。

解决方案

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;

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

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

:focus-visible css 伪选择器。 Chrome 和 Firefox 现在支持此属性。目前 Safari 不支持。 MDN Browser Compatibility

/*
  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">，它应该有视觉指示它已被聚焦。

【讨论】：

长按任意按钮仍会显示无用的黑色矩形。

@andreszs 是否会在 polyfill 或本机伪类中发生这种情况。

两者都有。但是，我通过使用 outline: 0px transparent !important; 作为 @ThinkThank 建议的 :focus-visible CSS 伪选择器的属性解决了这个问题

【参考方案4】：

有两种处理方式。

configuration 在 chrome 中很少有 suggested。

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

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

【讨论】：

最相关的答案

最后是一个在所有聚焦场景中都有效的不错的答案。非常好。

【参考方案5】：

这为我解决了：

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

并禁用此功能：screenshot

【讨论】：

是的，但对于我们开发人员（与问题相关）来说，这不是一个可接受的解决方案。我们不能告诉每个客户都做这样“复杂”的任务——我们必须坚持默认设置并尝试在没有客户交互的情况下自行更改它们。至少谷歌在这方面与微软合作过。但仍然……看到这种扁平化设计、同质颜色、所有矩形和难看轮廓的“落后发展”还是有点好笑。看起来几乎像 Windows 1、DOS、Mac 系统软件等。

当然，现在要求每个用户也这样做，尤其是你的老板。

【参考方案6】：

chrome 中的设置 > 外观 > 在焦点对象上快速突出显示。 禁用此选项。

【讨论】：

这对我有用，因为我在应用程序开发过程中遇到了这个问题，我认为我的应用程序有问题，但事实证明它与其他应用程序运行良好，因此通过在 chrome 中更改此选项来修复它。

问题不是这个

【参考方案7】：

转到 chrome 桌面浏览器

设置->高级->辅助功能->（关闭）在焦点对象上快速突出显示

当您点击浏览器时避免出现阴影框