Removing that ugly :focus ring (and keeping it too)

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

David Gilbertson:

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).

Direct Link →