:focus-visible Pseudo-Class

:focus-visible

:focus-visible applies only when the browser determines a visible focus indicator is necessary (keyboard navigation, not mouse clicks). It solves the problem of unwanted focus rings on click.

Example

/* Old approach: hide ALL focus rings (bad for accessibility) */
button:focus { outline: none; }

/* New approach: hide for mouse, show for keyboard */
button:focus { outline: none; }
button:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 3px;
}

CSS

Full Editor

Pro Tip

:focus-visible is now supported in all modern browsers — use it to balance aesthetics and keyboard accessibility.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned