CSS 什么是-webkit-focus-ring-color？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7538771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is -webkit-focus-ring-color?
提问by Randomblue
I want to reproduce the outlineeffect for focused input boxes in webkit to non-webkit browsers. I found herethe default CSS used in webkit. The lines of interest are:
我想将outlinewebkit 中聚焦输入框的效果重现到非 webkit 浏览器。我在这里找到了 webkit 中使用的默认 CSS。感兴趣的线路是：
:focus {
outline: auto 5px -webkit-focus-ring-color
}
I tried making a search in the whole code for the definition -webkit-focus-ring-colorherebut could not find it anywhere.
采纳答案by Kit Grose
-webkit-focus-ring-coloris defined in the WebKit codebase as focusRingColorin each RenderThemeclass. That work was performed in June 2009 as part of this changeset by Jeremy Moskovich.
-webkit-focus-ring-color在 WebKit 代码库中定义为focusRingColor每个RenderTheme类。这项工作是在 2009 年 6 月由 Jeremy Moskovich作为此变更集的一部分完成的。
For instance, the default Mac theme (used by Safari) defines the colour in RenderThemeMac.mm(in a roundabout way) as:
例如，默认的 Mac 主题（由 Safari 使用）将颜色定义为RenderThemeMac.mm（以迂回的方式）为：
[NSColor keyboardFocusIndicatorColor]
(Apple's very light documentation of that property is available online).
There is an override value for the Mac (called WebCore::oldAquaFocusRingColor) to be used for testing (near as I can tell it's for the code to be able to perform comparison between the browser rendering and a reference graphic; it is toggled using WebCore::usesTestModeFocusRingColor). It's defined in ColorMac.mmas the following (which apparently maps to Color(125, 173, 217)):
Mac 有一个覆盖值（称为WebCore::oldAquaFocusRingColor）用于测试（我可以告诉它的代码几乎可以在浏览器渲染和参考图形之间执行比较；它使用 切换WebCore::usesTestModeFocusRingColor）。它的定义ColorMac.mm如下（显然映射到Color(125, 173, 217)）：
0xFF7DADD9
Chromium/Chrome defines the colour in RenderThemeChromiumSkia.cppas:
Chromium/Chrome 将颜色定义RenderThemeChromiumSkia.cpp为：
Color(229, 151, 0, 255)
The default colour (specified in RenderTheme.h) is pure black:
默认颜色（在 中指定RenderTheme.h）是纯黑色：
Color(0, 0, 0)
回答by psaniko
Edit: As @chharvey notes, Highlightis now a deprecated system color,so disregard this answer.
编辑：正如@chharvey 所指出的，Highlight现在是不推荐使用的系统颜色，因此请忽略此答案。
-webkit-focus-ring-colordoes not work in Firefox. You can use the system color Highlightas a replacement though.
-webkit-focus-ring-color在 Firefox 中不起作用。不过，您可以使用系统颜色Highlight作为替代。
:focus {
outline: auto 2px Highlight;
outline: auto 5px -webkit-focus-ring-color;
}
Also see thissite on why resetting outlinestyles is usually a bad idea.
另请参阅此站点，了解为什么重置outline样式通常是个坏主意。
回答by Tyler Crompton
回答by Federico
FWIW: Using Chrome on a Mac, I get a blue outline color when using normal browser mode. When I use the device view, I get a yellow/golden outline color.
FWIW：在 Mac 上使用 Chrome 时，使用普通浏览器模式时，我的轮廓颜色为蓝色。当我使用设备视图时，我得到一个黄色/金色的轮廓颜色。
Not sure why it changes - was actually very confusing. See examples below.
不知道为什么它会改变 - 实际上非常令人困惑。请参阅下面的示例。
回答by Holtwick
The following code tries to find the closest solution to the system colors:
以下代码试图找到最接近系统颜色的解决方案：
*: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 */
}
