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

Question

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

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

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

Answer 1

-webkit-focus-ring-color在每个focusRingColor类中的WebKit代码库中定义为RenderTheme。这项工作于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)

Answer 2

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

Answer 3

修改：正如@chharvey所说，Highlight现在是Q&A，所以忽略了这个答案。

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

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

另请参阅deprecated system color,网站了解为什么重置outline样式通常不是一个好主意。

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

Answer 5

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

不确定为什么会发生变化 - 实际上非常令人困惑。见下面的例子。

Answer 6

如今，revert value具有不错的browser support（是！），它可以回滚到默认的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;