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

Question

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

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

结果是这样的：

隐身模式和带或不带扩展名的导航中都会发生。

我怎样才能恢复它？

Answer 1

我想你可以用这样的东西来实现它

*:focus {
   outline: 1px solid aliceblue
}

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

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

ps：虽然我认为新的 chrome 大纲非常丑陋，但不要忘记完全禁用它是一种不好的做法 http://www.outlinenone.com/

干杯

Answer 2

它是 chrome 83 的新 "feature"....（折磨所有 S.O。）我希望很快被删除。 https://support.google.com/chrome/thread/48974735?hl=en

Answer 3

The teams at Microsoft Edge and Google Chrome spent the last year collaborating to retheme and improve the functionality of the built-in form controls on Chromium browsers. ... The new focus indicator uses a thick dark ring with a thin white outline, which should improve visibility on both light and dark backgrounds. This is an easy accessibility win that automatically improves the keyboarding experience on a number of sites without developers needing to write any new code. What's New in Chrome 83

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

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

Answer 4

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

您必须添加“!important”。