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

Question

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

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

原文由 Barney Szabolcs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了回答这个问题，Webkit 浏览器使用 outline: 5px auto -webkit-focus-ring-color; 。 On Macs -webkit-focus-ring-color is blue rgb(94, 158, 214) (or #5E9ED6 ), but on Windows and Linux it’s gold rgb(229, 151, 0) (or #E59700 ) ( 参考)。

虽然我理解您对一致性的渴望，但用户通常只使用一种浏览器，并且习惯于浏览器的默认样式。请注意，除非您打算更改 :focus 的每个实例，否则您最终会遇到键盘用户的不一致。利弊诶！

如果您定义 outline 样式并希望在 :focus 上“恢复”为默认用户代理样式，这将有所帮助

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

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

！

原文由 Oli Studholme 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个 小提琴 提供了一个很好的近似值，您可能需要调整以更接近您的具体目标。

HTML

 <div contenteditable='true'>Edit Me</div>

CSS

 div[contenteditable=true] {
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin:10px;
}

div[contenteditable=true]:focus {
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

原文由 SW4 发布，翻译遵循 CC BY-SA 3.0 许可协议