Question

I have button styles that look like this:

.submit-button {
    display: block;
    color: red;
    outline: none;
}

Can I add a :focus state, and then set the outline to whatever the browser default outline is?

.submit-button:focus {
     outline: browser-default;
}

I tried outline: inherit; but this had no effect on the page.

Answer 1

You can use the :not() pseudo-class, like this:

.submit-button:not(:focus) {
    outline: none;
}

Doing so would prevent the selector to override the defaults on :focus.

The best part, is that the :not() pseudo-class is understandable by all browsers who understand the :focus as well.