为了回答这个问题，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-前缀颜色表示FF、IE和Edge将忽略第二条规则而使用第一条规则。Chrome、Safari和Opera将使用第二条规则。
嘘！

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

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

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

对于Tailwind用户来说，这是不同的，在^3.1.8上测试。Tailwind覆盖默认焦点颜色。