What is -webkit-focus-ring-color?

Solution 1:

-webkit-focus-ring-color is defined in the WebKit codebase as focusRingColor in each RenderTheme class. That work was performed in June 2009 as part of this changeset by Jeremy Moskovich.

For instance, the default Mac theme (used by Safari) defines the colour in RenderThemeMac.mm (in a roundabout way) as:

[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.mm as the following (which apparently maps to Color(125, 173, 217)):

0xFF7DADD9

Chromium/Chrome defines the colour in RenderThemeChromiumSkia.cpp as:

Color(229, 151, 0, 255)

The default colour (specified in RenderTheme.h) is pure black:

Color(0, 0, 0)

Solution 2:

Edit: As @chharvey notes, Highlight is now a deprecated system color, so disregard this answer.

-webkit-focus-ring-color does not work in Firefox. You can use the system color Highlight as a replacement though.

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

Also see this site on why resetting outline styles is usually a bad idea.

Solution 3:

Use this jsFiddle. I got rgb(229, 151, 0) in Chrome 14 on Windows 7.