Focus
You might say
I can't tell where I am when I use Tab. Can you add a clear focus outline?
Show which element will receive keyboard inputFocus identifies the interactive element currently controlled by the keyboard or another input method. A visible focus indicator is essential for navigation and form entry. It may differ from hover, but it should be at least as easy to see.
:focus
You can say this to an AI Agent
Add consistent high-contrast focus-visible styles for links, buttons, and inputs without removing default focus. Enter the page from the address bar using only keyboard and Tab through it; every position must be visible and Enter must trigger the expected control.
When to use it
- Keyboard navigation🔍 Search topics you are interested in…
- Form field editingSave
- Menu and dialog control① Name② Email③ Phone
- Any interactive element that can receive inputCustom checkbox
When NOT to use it
- Remove the browser outline without a replacementoutline: none
- Show focus only after a mouse click if keyboard users need itSave
- Use an indicator with too little contrast<div onclick>
- Move focus somewhere unexpected after an action② Name① Email③ Phone
Anatomy
Inputting...Stroke 2px+Tab → Next
The control currently holding focus
Tells everyone “focus is right here”
The route the Tab key travels; follows DOM order by default
Variants
Outline
Button
When the browser's default focus style is already clear
Ring
Input
Brand-color outer glow, more modern
Background
Menu item
For focused list and menu items
Typical use cases
Form field
Complete Your Profile
Tab ⇥ Press to move focus to the next field
Button
Nice color palette
Focused input: brand-color ring + glow — the cursor is easy to spot
Navigation
Dialog
🔍
theme
⌘K
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check