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

【问题标题】：Strange outline appears in Chrome 83/IE on my Windows 10我的 Windows 10 上的 Chrome 83/IE 中出现奇怪的轮廓
【发布时间】：2020-09-07 05:57:49
【问题描述】：

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

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

结果是这样的：

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

我怎样才能恢复它？

【问题讨论】：

有什么问题？
@Diggy。如何恢复默认轮廓？
现在是新的默认大纲

标签： google-chrome outline

【解决方案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 的对比度才能访问