HTML & CSS reference

:focus-visible

Matches a focused element when the browser decides the focus should be visible — usually after keyboard navigation.

Syntax

selector:focus-visible { … }

Examples

The orange outline appears after Tab, but not after a mouse click:

<style>
  button { padding: 8px 16px; }
  button:focus-visible { outline: 3px solid orange; outline-offset: 2px; }
</style>
 
<button>Click me</button>
<button>Then press Tab</button>

:focus-within — the parent of a focused element:

<style>
  form { padding: 12px; border: 2px solid lightgray; }
  form:focus-within { border-color: seagreen; }
</style>
 
<form><input placeholder="Focus me"></form>

Notes

This is the recommended way to style focus for buttons and links. Text fields show :focus-visible after a mouse click too, because the user is about to type.

Related recipes

In the tutorial

Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.

Thanks for reading!