什么是-webkit-focus-ring-color？答案

【问题标题】：What is -webkit-focus-ring-color?什么是-webkit-focus-ring-color？
【发布时间】：2011-11-24 05:22:20
【问题描述】：

我想将 webkit 中聚焦输入框的 outline 效果重现到非 webkit 浏览器。我发现here webkit 中使用的默认 CSS。感兴趣的行是：

:focus {
    outline: auto 5px -webkit-focus-ring-color
}

我尝试在整个代码中搜索定义-webkit-focus-ring-colorhere，但在任何地方都找不到。

【问题讨论】：

嗯，“对焦环”是一个圆形渐变，据我所知无法在轮廓中定义。对我来说，它看起来更像是一个盒子阴影。这就是我个人使用box-shadow: 0 0 2px <color> 之类的方式重新创建效果的方式
这也取决于用户的偏好。在 Mac 上，它将是蓝色或石墨色，而在 PC 上，它将是金黄色。
使用 Chrome 开发者工具。强制元素的焦点状态和see for yourself。

标签： css webkit

【解决方案1】：

-webkit-focus-ring-color 在 WebKit 代码库中定义为每个 RenderTheme 类中的 focusRingColor。这项工作于 2009 年 6 月作为 this changeset by Jeremy Moskovich 的一部分执行。

例如，默认的 Mac 主题（由 Safari 使用）将RenderThemeMac.mm 中的颜色（以迂回的方式）定义为：

[NSColor keyboardFocusIndicatorColor]

(Apple's very light documentation of that property is available online).

Mac 有一个覆盖值（称为WebCore::oldAquaFocusRingColor）用于测试（据我所知，这是为了让代码能够在浏览器渲染和参考图形之间进行比较；它是切换的使用WebCore::usesTestModeFocusRingColor)。它在ColorMac.mm 中定义如下（显然映射到Color(125, 173, 217)）：

0xFF7DADD9

Chromium/Chrome 将RenderThemeChromiumSkia.cpp 中的颜色定义为：

Color(229, 151, 0, 255)

默认颜色（在RenderTheme.h中指定）是纯黑色：

Color(0, 0, 0)

【讨论】：

【解决方案2】：

编辑：正如@chharvey 所说，Highlight 现在是deprecated system color,，所以请忽略这个答案。

-webkit-focus-ring-color 在 Firefox 中不起作用。您可以使用系统颜色Highlight 作为替代品。

:focus {
    outline: auto 2px Highlight;
    outline: auto 5px -webkit-focus-ring-color;
}

另请参阅this 网站，了解为什么重置outline 样式通常是一个坏主意。

【讨论】：

谢谢，Bootstrap 默认重置outline 很烦人。我希望我可以简单地使用outline: inherit/initial 重新重置它。
我同意 Bootstrap 重置它很烦人......这就是为什么我们必须尝试“取消”重置它以使其尽可能接近浏览器默认设置，因为一旦设置，您就无法取消重置。我也希望 initial/inherit 能奏效，但也没有。
关于系统颜色：“Authors must not use these keywords.”
Looks like Highlight has been un-deprecated by the W3C

【解决方案3】：

使用这个jsFiddle。我在 Windows 7 上的 Chrome 14 中获得了rgb(229, 151, 0)。

【讨论】：

我在 Mac OS X 上的 Chrome 14 中获得了 rgb(94, 158, 214)。哈哈。
嗯，是的，Mac 输入字段默认为蓝色。您可以将其更改为石墨。但在 Windows 上（我认为 Ubuntu 也是如此），大纲是黄金。我相信金色是 Webkit 的默认颜色，我认为 Mac 会覆盖它（但我可能对此不正确）。这是否回答你的问题？（顺便说一句，在 Mac OS 10.6 上的 Chrome 12 中，我得到了rgb(97, 157, 215)。）
在 Mac 上，轮廓是渐变的，而其他的则不是。
rgb(59, 153, 252) 在当前版本中。

【解决方案4】：

以下代码试图找到最接近系统颜色的解决方案：

*:focus {
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px activeborder; /* Blink, Chrome */ 
    box-shadow: 0 0 0 3px -moz-mac-focusring; /* Firefox */
    outline: auto 0 -webkit-focus-ring-color; /* Webkit, Safari */
}

【讨论】：

【解决方案5】：

FWIW：在 Mac 上使用 Chrome，在使用普通浏览器模式时，我会得到蓝色的轮廓颜色。当我使用设备视图时，我得到一个黄色/金色的轮廓颜色。

不确定它为什么会改变 - 实际上非常令人困惑。请参阅下面的示例。

【讨论】：

是的，没错。

【解决方案6】：

如今，revert value 有很好的 browser support（耶！），用于回滚到默认的 UA 样式，这是我的 2020 年“请让我有轮廓”sn-p（通常伴随着 @987654324 @ 声明）：

:focus {
  outline: -webkit-focus-ring-color auto thin;
  outline: revert;
}

或者，如果您希望对outline 的第一个实例使用速记属性：

  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
  outline-width: thin;
  outline: revert;

【讨论】：