CSS Focus Summary

Focus identifies the element that is currently ready to receive keyboard input. CSS can use :focus and :focus-visible to make the active input, button, or link easier to see.

input:focus {
	outline: 4px solid blue;
}

What Focus Means

Only one element on a page normally has focus at a time. That element is ready to receive typing, keyboard commands, or another form of interaction.

For example, when a text input has focus, the user can type into it. When a button has focus, pressing Enter or the Space bar can activate it.

Inputs, buttons, links, text areas, and select menus can normally receive focus. Plain paragraphs and div elements do not usually receive focus.

How Elements Receive Focus

A user can focus an element by clicking it, tapping it, or moving through interactive elements with the Tab key.

<input type="text">
<button type="button">Save</button>
<a href="next.html">Next Page</a>

Pressing Tab usually moves through these elements in the order they appear in the HTML.

The Focus Pseudo-Class

The :focus pseudo-class selects an element while it has focus.

input:focus {
	border-color: #194684;
	outline: 4px solid #eaf1fe;
}

This changes the border and outline while the input is active. The styles disappear when focus moves somewhere else.

The CSS selectors lesson explains how pseudo-classes target an element in a particular state.

Focus Visible

The :focus-visible pseudo-class usually applies when the browser decides that a visible focus indicator is needed, especially during keyboard navigation.

button:focus-visible,
a:focus-visible {
	outline: 4px solid #194684;
	outline-offset: 4px;
}

This is commonly used for buttons and links. It gives keyboard users a clear indicator without always showing the same outline after a mouse click.

:focus matches whenever the element has focus. :focus-visible matches when the browser determines that the focus should be clearly shown.

Focus Styles For Form Fields

Inputs, text areas, and select menus often change their border, background, or outline when they receive focus.

input:focus,
textarea:focus,
select:focus {
	border-color: #194684;
	outline: 4px solid #eaf1fe;
	outline-offset: 4px;
}

Using the same focus treatment across related fields makes a form easier to understand. The active field should look clearly different from the other fields.

The HTML inputs lesson explains labels, text fields, checkboxes, radio buttons, and other form controls.

Focus Styles For Buttons And Links

Buttons and links should also have a visible keyboard focus state.

button:focus-visible,
a:focus-visible {
	outline: 4px solid #194684;
	outline-offset: 4px;
}

The outline should remain easy to see against both the element and the page background.

Do Not Hide Focus

Browsers provide default focus styles so people using a keyboard can follow their position on the page.

button:focus {
	outline: none;
}

This removes the visible indicator. Do not remove a focus outline unless you replace it with another clear focus style.

button:focus-visible {
	outline: 4px solid #194684;
	outline-offset: 4px;
}

A small color change may not be enough. A strong outline is usually easier to recognize.

Test Focus With The Keyboard

The simplest focus test is to reload the page and press Tab repeatedly without using the mouse.

Confirm that every interactive element receives focus.
Confirm that the focused element is easy to identify.
Confirm that focus moves in a logical order.
Confirm that buttons and links work with the keyboard.

A page that works with a mouse but hides keyboard focus is incomplete.

Focus