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

Question

我想将outlinewebkit中聚焦输入框的效果重现为非webkit浏览器.我在这里找到了webkit中使用的默认CSS.兴趣点是:

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

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

Answer 1

-webkit-focus-ring-colorfocusRingColor在每个RenderTheme类中的WebKit代码库中定义.这项工作于2009年6月由杰里米·莫斯科维奇(Jeremy Moskovich)执行.

例如,默认的Mac主题(由Safari使用)将RenderThemeMac.mm(以环形交叉方式)的颜色定义为:

[NSColor keyboardFocusIndicatorColor]

(Apple在网上提供了很好的文件资料).

有一个WebCore::oldAquaFocusRingColor用于测试的Mac(被叫)的覆盖值(我可以告诉它,代码能够在浏览器渲染和参考图形之间进行比较;它被切换使用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.我rgb(229, 151, 0)在Windows 7上使用Chrome 14.

Answer 3

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

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

Answer 4

编辑：正如@chharvey所指出的那样，Highlight现在是不推荐使用的系统颜色，因此请忽略此答案。

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

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

另请参阅此网站，了解为什么outline通常不建议重置样式。

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;