Issue
The vast majority of a
s 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
?
Solution
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
Answered By - Kevin Jantzer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.