css - 什么是 -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 在 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)