我的 Windows 10 上的 Chrome 83/IE 中出现奇怪的轮廓

Posted 2023-03-06

【中文标题】我的 Windows 10 上的 Chrome 83/IE 中出现奇怪的轮廓

【英文标题】：Strange outline appears in Chrome 83/IE on my Windows 10

【发布时间】：2020-09-07 05:57:49

【问题描述】：

发生了非常非常奇怪的事情。 几个小时后，我的 Chrome（也是 IE）在输入时显示了不同的默认大纲。 查看代码我看到大纲集如下：

大纲：-webkit-focus-ring-color auto 1px

结果是这样的：

在有或没有扩展程序的情况下发生在隐身和导航中。

我怎样才能恢复它？

【问题讨论】：

有什么问题？

@Diggy。如何恢复默认轮廓？

现在是新的默认大纲

【参考方案1】：

*:focus 
   outline: none !important; /* or customize it */

您必须添加“！important”。

【参考方案2】：

Microsoft Edge 和 Google Chrome 的团队在去年度过了 合作重新主题并改进内置的功能 Chromium 浏览器上的表单控件。 ...新的焦点指示器使用 厚厚的暗环，带有薄薄的白色轮廓，应该会有所改善 在浅色和深色背景上的可见性。这是一个容易的 自动改进键盘输入的可访问性胜利 无需开发人员编写即可在多个站点上体验 任何新代码。 What's New in Chrome 83

您可以轻松地完全删除或自定义您想要的所有或任何元素的焦点轮廓，如下所示：

*:focus 
   outline: none; /* or customize it */

【讨论】：

对于在 Chrome 83 中寻找新对焦环样式的颜色值的任何人，它是：rgb(0, 33, 245) 或 #0021F5 (-webkit-focus-ring-color)跨度>

【参考方案3】：

这是 chrome 83 的一个新“功能”......（困扰所有 S.O.）我希望很快就会被删除。 https://support.google.com/chrome/thread/48974735?hl=en

【参考方案4】：

我认为你可以通过这样的方式实现它

*:focus 
   outline: 1px solid aliceblue

因此您可以为所有元素定义要在焦点上呈现的轮廓。

可以在这里找到类似的问题 Chrome default focus outline

ps：虽然我认为新的 chrome 轮廓丑得要命，但不要忘记完全禁用它是一种不好的做法 http://www.outlinenone.com/

干杯

【讨论】：

注意：颜色很重要，因为颜色需要与背景有 3:1 的对比度才能访问