css - Chrome 中蓝色焦点轮廓的默认样式是什么？

Question

我有一个使用 contenteditable div 的网络应用程序。我喜欢它们在 Chrome 中的显示方式:当我聚焦时，Chrome 会在 div 周围显示漂亮的蓝色光芒。但是在 Firefox 中我得到一个丑陋的虚线轮廓。到目前为止，我观察到的是，一旦我更改了 div:focus 的轮廓，Chrome 就会停止显示其默认的蓝色框架。我想让我的应用始终保持美观，所以我的问题是

我如何为 div[contenteditable="true"]:focus 复制 Chrome 的默认样式？

Answer 1

为了回答这个问题，Webkit 浏览器使用 outline: 5px auto -webkit-focus-ring-color;。在 Mac 上 -webkit-focus-ring-color 是蓝色 rgb(94, 158, 214)(或 #5E9ED6)，但在 Windows 上Linux 是金色的 rgb(229, 151, 0)(或 #E59700)(ref)。

虽然我理解您对一致性的渴望，但用户通常只使用一种浏览器，并且习惯于浏览器的默认样式。请注意，除非您计划更改 :focus 的每个实例，否则您最终会遇到不一致的情况，例如键盘用户。优点和缺点嗯!

如果您定义了 outline 样式并希望在 :focus 上“还原”回默认的用户代理样式，这将有所帮助

.myClass:focus {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

-webkit-prefix 颜色表示 FF、IE 和 Edge 将忽略第二条规则并使用第一条。 Chrome、Safari 和 Opera 将使用第二条规则。

喂!