Home >CSS >CSS reference – properties, selectors, functions >:focus

:focus

selector:focus

Applies to the element that currently receives keyboard input: a form field the user is typing into, or a link or button selected with the Tab key. At most one element on the page has focus at a time.

Values

Focus can be given to:

links with an href attribute, buttons, form fields, <summary> and elements with contenteditable,
any element with tabindex="0" (with the Tab key too) or tabindex="-1" (only from a script with focus()).

Examples

A field being typed into has a blue border and a light outline:

<input class="field" type="text" placeholder="Name">

.field {
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
}
.field:focus {
  border-color: #0088d1;
  outline: 3px solid #b3e5fc;
}

result

result – with focus

Things to watch out for

Never write :focus { outline: none; } without a replacement – keyboard users then cannot see where they are on the page (WCAG 2.4.7).
:focus also applies after a mouse click, when hardly anyone wants an outline on a button. A bold outline therefore belongs rather in :focus-visible.
Whether a mouse click gives a button or a link focus differs by browser and system – on macOS, according to MDN, neither Safari nor Firefox give it. So do not rely on :focus after a click.
An element that cannot have focus (div, span without tabindex) does not get :focus even after focus() from a script.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1, Safari 1. As of October 2026 (MDN browser-compat-data).