Copy the Browser’s Native Focus Styles

nc efi placeholder

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.

Chrome 84
Screen Shot 2020 08 25 at 4.08.31 PM
Safari 13.1
Screen Shot 2020 08 25 at 4.09.01 PM
Firefox 80

Source link

Leave A Reply