1

I'm working with a WordPress theme that has applied outline:none; to several elements for their :focus state. I need to negate this without modifying the parent-theme files, but nothing seems to be working.

Here's what I've tried:

*:focus { outline: inherit !important; }
*:focus { outline: initial !important; }
a, a:focus { outline: inherit !important; }
a, a:focus { outline: initial !important; }

I really want to just reset it to defaults, but the only thing that's had any result so far is:

*:focus { border: 3px solid red !important; }

But I really don't want to manually set the styles, just let the browsers do their thing.

unor
  • 92,415
  • 26
  • 211
  • 360
KingRichard
  • 1,214
  • 2
  • 14
  • 25
  • my recommendation, is that if you won't be applying the rules to but a select few things, would be to simply create a `nofocus` class and apply it to the elements accordlying – soulshined May 16 '18 at 03:15
  • 1
    We can now use `outline: revert`, see https://stackoverflow.com/a/63756875/9314312. – Null Sep 05 '20 at 17:49

1 Answers1

2

I agree with @soulshined's comment about using a class instead, but the value you're looking for is auto.

Snippet (manually focus it in developer tools) 

a:focus {
  outline: 0;
}

#withOutline:focus {
  outline: auto;
}
<a href="javascript:void(0)">A bunch of text</a>
<a href="javascript:void(0)">A bunch of text</a>
<a href="javascript:void(0)">A bunch of text</a>
<a href="javascript:void(0)">A bunch of text</a>
<a id="withOutline" href="javascript:void(0)">A bunch of text</a>
Chris Happy
  • 7,088
  • 2
  • 22
  • 49
  • 1
    THANK YOU! Not sure why I couldn't think of auto, but it's not anywhere on the W3 docs. THANK YOU x1,000,000,000 – KingRichard May 16 '18 at 04:52