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

Question

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

如何复制 Chrome 的默认样式

div[contenteditable="true"]:focus

？

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

<input class="myClass" />

-webkit

前缀颜色意味着 FF、IE 和 Edge 将忽略第二条规则并使用第一条规则。 Chrome、Safari 和 Opera 将使用第二条规则。

哈！

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

Answer 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%);
}

<button type="button"">Outline</button>

Answer 4

.myClass:focus {
  outline-color: Highlight;
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
  outline-width: 1px;
}

Answer 5

对于 Tailwind 用户来说，情况有所不同，在 ^3.1.8 上进行测试。 Tailwind 覆盖默认焦点颜色。