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

我有一个使用contenteditable div的web应用程序。我喜欢它们在Chrome中的显示方式：当我专注时，Chrome显示围绕div的蓝色光芒。然而在Firefox中，我得到了一个丑陋的虚线轮廓。到目前为止，我观察到的是，一旦我更改div：focus的轮廓，Chrome会停止显示其默认蓝色框架。我想让我的应用一直很好看，所以我的问题是什么是Chrome中蓝色焦点轮廓的默认样式？

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

来源

2013-12-16 Barnabas Szabolcs

知道如何找到它更有帮助：在devtools中，force：focus状态在div上，并且看到样式 – caub

要回答这个问题，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！

来源

2016-07-21 08:09:50

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

来源

2013-12-16 11:15:07 SW4

谢谢，这看起来很棒！我仍然保留这个问题，因为这需要四舍五入的边界并且不保留原始边界。 –

@Barnabas Szabolcs只是删除边框的造型... – SW4

最简单的事情就是使用上面的'div [contenteditable = true]：focus'类。尽管只有原始元素具有指定的边界，否则它将无法更改。 – SW4

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

回答

相关问题