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

Question

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

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

我尝试在整个代码中搜索定义 -webkit-focus-ring-color 此处 但无法在任何地方找到它。

Answer 1

-webkit-focus-ring-color 在 WebKit 代码库中定义为每个 RenderTheme 类中的 focusRingColor。这项工作是在 2009 年 6 月作为 Jeremy Moskovich 变更集的一部分进行的。

例如，默认的 Mac 主题（Safari 使用）在 RenderThemeMac.mm（以迂回方式）为：

[NSColor keyboardFocusIndicatorColor]

(苹果非常该属性的简单文档可在线获取）。

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

0xFF7DADD9

Chromium/Chrome 定义 RenderThemeChromiumSkia.cpp 为：

Color(229, 151, 0, 255)

默认颜色 (在 RenderTheme.h）是纯黑色：

Color(0, 0, 0)

Answer 2

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

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

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

Answer 3

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

Answer 4

前言：
在 Mac 上使用 Chrome，在使用正常浏览器模式时，我会看到蓝色的轮廓颜色。当我使用设备视图时，我得到黄色/金色轮廓颜色。

不知道为什么会改变——实际上非常令人困惑。请参阅下面的示例。

Answer 5

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

*: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 */
}

Answer 6

如今，revert 值具有良好的浏览器支持（耶！），用于回滚到默认的UA样式，这里是我的2020 “请让我有轮廓”片段（通常伴随 !important 声明）：

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