How can I restore the initial value of outline for :focus?

Question

The vast majority of as in my application have a custom :focus style, and so they have outline: none. However, in some cases I don't have a good custom alternative, and I want to override my custom style and use the browser's default focus style.

I tried using:

div.where-i-want-this-style a:focus {
  outline: initial;
}

But this didn't give me an outline. In fact, when I remove the outline: none; from higher up the cascade and toggle this line, I see that this line actually causes the outline to go away.

My theory is that initial here actually uses the initial outline of the a, not of a focused a. That value is, essentially, none.

Is there a value I can provide that means something like outline: default-focus-outline?

Answer 1

For the record, something I found to work in Chrome, but not Firefox:

a:focus {
  outline-style: none;
}

div.where-i-want-this-style a:focus {
  outline-style: auto;
}

This works because Chrome's initial value for outline-style is pretty straightforward (auto), and setting just that part to none is enough to disable the default outline.

Unfortunately, Firefox appears to use a vastly different method for setting its default focus style. If I'm reading Firebug right, it may not be expressible in CSS, which means there's no way to get it back once it's overridden. Once I discovered that I didn't bother checking any other browsers.

Answer 2

I would suggest using :not() to remove the default outline from all links except the class you want.

a:not(.default-outline):focus {
    outline: none;
}

Here's a full example