56

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.

3
  • 1
    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 <color> Sep 24, 2011 at 15:17
  • 2
    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. Sep 24, 2011 at 15:26
  • Use Chrome DevTools. Force element's focus state and see for yourself.
    – x-yuri
    Oct 10, 2017 at 22:07

6 Answers 6

43

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

4
  • 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, 2016 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, 2017 at 4:57
  • 4
    regarding system colors: “Authors must not use these keywords.”
    – chharvey
    Dec 7, 2017 at 8:16
  • 4
11

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

4
  • 6
    I got rgb(94, 158, 214) in Chrome 14 on Mac OS X. Lol.
    – Randomblue
    Sep 24, 2011 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).) Sep 25, 2011 at 17:44
  • And on Macs, the outline is a gradient and others it is not. Sep 25, 2011 at 17:49
  • 1
    rgb(59, 153, 252) in the current version. Dec 18, 2015 at 16:35
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.

device-enabled, yellow outline

normal-browser, blue outline

1
  • Yes, that's true. Jul 26, 2017 at 2:39
6

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

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.