:focus-visible — Smart Focus Indicators With CSS

In this tutorial, you will learn about :focus. We cover key concepts, practical examples, and best practices to help you master this topic.

The :focus-visible pseudo-class applies focus styles only when the browser determines the focus should be visible, typically during keyboard navigation, not mouse clicks.

In this tutorial, you'll master the Keyboard Navigation :focus-visible pseudo-class.

What You'll Learn

By the end of this lesson, you'll understand how :focus-visible works, how to use it to show focus only when needed, and how to detect :focus-visible support.

Why It Matters

Mouse users do not need visible focus rings after clicking. :focus-visible shows focus only to keyboard users, providing a better experience for everyone.

Real-World Use

DodaTech site uses :focus-visible for all focus styles, showing outlines only during keyboard navigation and keeping the interface clean for mouse users.

:focus-visible Behavior

flowchart TD
  A[Element receives focus] --> B{Input method?}
  B -->|Keyboard Tab| C[Show focus indicator]
  B -->|Mouse click| D[Hide focus indicator]
  B -->|Keyboard arrow| C
  B -->|Touch| D
  C --> E[:focus-visible applies]
  D --> F[:focus-visible does not apply]

Using :focus-visible

/* Basic :focus-visible usage */
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Custom focus for keyboard users only */
a:focus-visible {
  outline: 3px dashed #0066CC;
  outline-offset: 4px;
}

/* Focus within widget groups */
[role="tab"]:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: -2px;
}

Focus Visible Reset

/*
  Base: show focus for keyboard users
  Fallback: always show outline if :focus-visible not supported
*/
:focus {
  outline: 3px solid #0066CC;
}

:focus:not(:focus-visible) {
  outline: none;
}

Detecting :focus-visible Support

@supports (selector:focus-visible) {
  :focus-visible {
    outline: 3px solid #0066CC;
  }
  :focus:not(:focus-visible) {
    outline: none;
  }
}

@supports not (selector:focus-visible) {
  :focus {
    outline: 3px solid #0066CC;
  }
}

Common Mistakes

• Removing all focus outlines and not using :focus-visible: Keyboard users lose all focus indication.
• Using :focus-visible without a fallback: Older browsers do not support :focus-visible.
• Applying :focus-visible to everything without considering context: Some elements need persistent focus styles.
• Not testing :focus-visible behavior: The browser heuristic may not match your expectations.

Practice and Challenge

1. When does :focus-visible apply? When the browser determines focus should be visible, typically during keyboard navigation.

2. What is the difference between :focus and :focus-visible? :focus applies always. :focus-visible applies only for keyboard navigation.

3. How do you handle browsers that do not support :focus-visible? Provide a :focus fallback.

4. Why should mouse users not see focus indicators? Focus indicators after mouse clicks are unnecessary and visually noisy.

5. Challenge: Convert your website's focus styles to use :focus-visible. Test with both mouse and keyboard to verify the behavior.

FAQ

Mini Project

Create a demo page with buttons, links, inputs, and custom controls. Use :focus-visible for keyboard-only focus styles. Verify with Tab and mouse click.

What's Next

Continue to Focus Order to learn about logical focus order in complex layouts.