Removing the focus outline is like removing the wheelchair ramp from a school because it doesn’t fit in with the aesthetic.
So David shows how you can remove it unless you detect that the user is tabbing, then show it. Essentially you add “user-is-tabbing” class to the body when you detect the tabbing, and use that class to remove the focus styles if it’s not there (plus handle the edge cases).
Removing that ugly :focus ring (and keeping it too) is a post from CSS-Tricks
Feed Source: CSS-Tricks
Article Source: Removing that ugly :focus ring (and keeping it too)