Chrome中蓝色焦点轮廓的默认样式是什么？ [英] What is the default style of the blue focus outline in Chrome?

问题描述

我有一个使用内容可编辑div的网络应用。我喜欢它们在Chrome中的显示方式：当我聚焦时，Chrome会在div周围显示出漂亮的蓝色光芒。但是，在Firefox中，我得到了一个难看的虚线轮廓。
到目前为止，我观察到的是，一旦我更改div：focus的轮廓，Chrome就会停止显示其默认的蓝色框。
我想使我的应用程序始终保持美观，所以我的问题是

I have a webapp that uses contenteditable div's. I like how they appear in Chrome: when I focus, Chrome displays a nice blue glow around the div. However in Firefox I get an ugly dashed outline. What I observed so far is that Chrome stops displaying its default blue frame once I change the outline of div:focus. I'd like to make my app consistently look nice, so my question is

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

推荐答案

要回答这个问题，Webkit浏览器使用轮廓：5像素自动-webkit-focus-ring-color; 。在Mac上 -webkit-focus-ring-color 是蓝色 rgb（94，158，214）（或＃5E9ED6 ），但在Windows和Linux上是黄金 rgb（229，151，0）（或＃E59700 ）（ ref ）。

To answer the question, Webkit browsers use 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) (ref).

虽然我了解您对一致性的渴望，但用户通常只使用一种浏览器，并且习惯于浏览器的默认样式。请注意，除非您打算更改每个：focus 实例，否则最终会出现不一致的情况，例如键盘用户。优点和缺点！！

While I understand your desire for consistency, users generally only use one browser, and are used to their browser’s default styles. Note that unless you plan to change every instance of :focus you’ll end up with inconsistency for e.g. keyboard users. Pros and cons eh!

如果您定义了 outline 样式并想恢复为默认的用户代理：focus 上的样式，这将帮助

If you define outline styles and want to ‘revert’ back to the default User Agent styles on :focus, this will help

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

-webkit -前缀颜色表示FF，IE和Edge将忽略第二条规则，而使用第一条规则。 Chrome，Safari和Opera将使用第二条规则。

The -webkit-prefix color means FF, IE and Edge will ignore the second rule and use the first. Chrome, Safari and Opera will use the second rule.

HTH！

这篇关于Chrome中蓝色焦点轮廓的默认样式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！