Focus

CSS Focus Summary

CSS :focus changes how an element looks when it is ready to receive keyboard input, such as when someone tabs to a link or clicks inside a form field.

a:focus {
	outline: 2px solid blue;
}

Focus styles help people see where they are on the page when using a keyboard, switch device, or other assistive technology.

Focusable Elements

Links, buttons, inputs, textareas, and select menus can receive focus. These are elements a person can interact with.

button:focus {
	outline: 3px solid orange;
}

The focus outline shows which control is currently selected.

Do Not Remove Focus Without Replacing It

Removing outlines can make a page difficult or impossible to use with a keyboard.

button:focus {
	outline: 3px solid #2563eb;
	outline-offset: 3px;
}

If the default outline does not fit the design, replace it with another visible focus style.

Focus And Hover Are Different

:hover responds to a pointer. :focus responds to selection. Many interactive elements should have both hover and focus styles.

a:hover,
a:focus {
	color: red;
}

The Hover lesson explains pointer-based states.