Remy documented this the other day. Firefox supports a Highlight
keyword and both Chrome and Safari support a -webkit-focus-ring-color
keyword. So if you, for example, have removed focus from something and want to put it back in the same style as the browser default, or want to apply a focus style to an element when it isn’t directly in focus itself, this can be useful.
For example:
button:focus + span {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
Looks good to me. It’s especially helpful with the sorta weird new Chrome double-outline style that would be slightly tricky to replicate otherwise.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-4.08.13-PM.png?resize=536%2C248&ssl=1)
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-4.08.31-PM.png?resize=564%2C268&ssl=1)
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-4.09.01-PM.png?resize=520%2C210&ssl=1)
Thanks a lot for this!
This was helpful. Thanks!
How does this work with IE og Edge?