CODEWITHSUNDEEP
cssaccessibility
Kevin Burke
Kevin Burke

Reputation: 64756

Set outline:none for a, :hover and :active but enable browser default for :focus

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.

Upvotes: 0

Views: 1029

Answers (1)

kizu
kizu

Reputation: 43224

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.

Upvotes: 4

Related Questions