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

【问题标题】：What is the default style of the blue focus outline in Chrome?Chrome中蓝色焦点轮廓的默认样式是什么？
【发布时间】：2013-12-16 11:11:48
【问题描述】：

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

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

【问题讨论】：

知道如何找到它更有帮助：在 devtools 中，强制 :focus 状态在 div 上，然后查看样式

标签： css google-chrome contenteditable

【解决方案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 将使用第二条规则。

HTH！

【讨论】：

这似乎很旧，因为它现在是 box-shadow。你知道今天的价值吗？

【解决方案2】：

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

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;
}

【讨论】：

谢谢，看起来很棒！我仍然没有解决这个问题，因为这需要圆形边框并且不保留原始边框。
最简单的方法就是使用上面的div[contenteditable=true]:focus 类。虽然它只有在原始元素指定了边框时才有效，否则它没有什么可改变的。
这不适用于具有overflow: hidden 的元素，因为阴影将被视为溢出。

【解决方案3】：

我想我找到了完美的，至少对我来说：

// Beggin

button {
  outline: 5px auto rgba(0, 150, 255, 1);
  -webkit-outline: 5px auto rgba(0, 150, 255, 1);
  -moz-outline: 5px auto rgba(0, 150, 255, 1);
  -ms-outline: 5px auto rgba(0, 150, 255, 1);
  -o-outline: 5px auto rgba(0, 150, 255, 1);
  /* Use a border to apply the outline */
  border: 1px solid rgba(0, 0, 0, 0);
  
  /* Unimortant styling: */
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
}

&lt;button type="button""&gt;Outline&lt;/button&gt;

【讨论】：

欢迎来到 Stack Overflow！请不要破坏您的帖子。通过在 Stack Overflow 上发帖，您已授予 SO 在 CC BY-SA 3.0 license 下分发该内容的不可撤销权利。根据 SO 政策，任何破坏行为都将被撤销。