What is -webkit-focus-ring-color?

Question

I want to reproduce the outline effect for focused input boxes in webkit to non-webkit browsers. I found here the default CSS used in webkit. The lines of interest are:

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

I tried making a search in the whole code for the definition -webkit-focus-ring-color here but could not find it anywhere.

Well, the "focus ring" is a rounded gradient which as far as I know of cannot be defined in outline. It looks more like a box-shadow to me. That's how I would personally recreate the effect with something like `box-shadow: 0 0 2px ` — Tyler Crompton, Sep 24 '11 at 15:17
IT also depends on the the user's preferences. On a Mac, it will be either blue or graphite and on a PC, it will be a goldenrod color. — Tyler Crompton, Sep 24 '11 at 15:26
Use Chrome DevTools. Force element's focus state and [see for yourself](https://i.imgur.com/hkEnWUw.png). — x-yuri, Oct 10 '17 at 22:07

score 43 · Accepted Answer · answered Aug 13 '12 at 07:23

-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)

score 16 · Answer 2 · edited Jul 26 '22 at 15:42

16

-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.

edited Jul 26 '22 at 15:42

Nicholas Shanks

10,623
4
56
80

answered Jul 25 '16 at 14:56

psaniko

1,180
16
17

4

Thanks, it's annoying when Bootstrap reset `outline` by default. I wish I could simply use `outline: inherit/initial` to re-reset it. – Tien Do Dec 21 '16 at 11:16
3

I agree with Bootstrap resetting it being annoying... which is why we then have to try to "un-"reset it to bring it back to as close to the browser default as we can, because you cannot un-reset something once it's set. I was also hoping initial/inherit would have worked, but neither does. – Keith DC Jan 22 '17 at 04:57
4

regarding system colors: [“Authors must not use these keywords.”](https://www.w3.org/TR/css-color-4/#system-colors) – chharvey Dec 07 '17 at 08:16
4

[Looks like `Highlight` has been un-deprecated by the W3C](https://www.w3.org/TR/css-color-4/#deprecated-system-colors) – joeyquarters Apr 06 '20 at 21:49

score 11 · Answer 3 · answered Sep 24 '11 at 15:33

11

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

answered Sep 24 '11 at 15:33

Tyler Crompton

12,284
14
65
94

6

I got `rgb(94, 158, 214)` in Chrome 14 on Mac OS X. Lol. – Randomblue Sep 24 '11 at 16:03
1

Well, yeah, Mac input fields by default are a blue color. You can change it to graphite. But on Windows (and I think Ubuntu as well), the outline is gold. I believe the gold color is Webkit's default color and I think Macs override that (but I may be incorrect about that). Did this answer your question? (By the way, in Chrome 12 on Mac OS 10.6, I got `rgb(97, 157, 215)`.) – Tyler Crompton Sep 25 '11 at 17:44
And on Macs, the outline is a gradient and others it is not. – Tyler Crompton Sep 25 '11 at 17:49
1

`rgb(59, 153, 252)` in the current version. – Chuck Le Butt Dec 18 '15 at 16:35

score 6 · Answer 4 · answered Jul 19 '16 at 17:46

6

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.

Not sure why it changes - was actually very confusing. See examples below.

answered Jul 19 '16 at 17:46

Federico

6,388
6
35
43

Yes, that's true. – Luigi Lopez Jul 26 '17 at 02:39

score 6 · Answer 5 · answered Jan 30 '20 at 14:59

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

score 6 · Answer 6 · answered Sep 05 '20 at 17:47

Nowadays, the revert value has good browser support (yay!), which is used to roll back to the default UA styles, here's my 2020 "please let me have outlines" snippet (usually accompanied with !important declarations):

:focus {
  outline: -webkit-focus-ring-color auto thin;
  outline: revert;
}

Or if you wish to use longhand properties for the first instance of outline:

  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
  outline-width: thin;
  outline: revert;

What is -webkit-focus-ring-color?

6 Answers6

Linked