How to override `outline:0` and revert to user agent stylesheet's focus styles?

Question

We use a third-party styling library that removes focus styles from all focus-able elements, like this:

:focus {
  outline: 0;
}

This is shitty for accessibility, but we're not in any position to remove or fork the library.

When I toggle the rule off in devtools, we revert to the useragent stylesheet, which in Chrome is:

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

I don't want to set custom outline styles to override the useragent if I can avoid it. I'd also really like to avoid having to hardcode styles for every possible useragent stylesheet.

But the docs for outline aren't really giving me any clues here. For example, outline: initial doesn't seem to restore the browser default. Anyone know how to solve this?

Answer 1

The best solution is to remove the focus selector from your third-party styling library CSS.

If this is not possible, then I would recommend adding an override to a stylesheet that is loaded after your third-party CSS.

Something like this should do:

    :focus {
        outline: 4px solid red;
    }

You can even add an !important declaration for good measure, if you want to.

There's no need to bother with user-agent specific values.