:focus

The :focus CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

This pseudo class applies only to the focused element, not its parents, like :checked and :enabled but unlike :active or :hover.

Syntax

:focus { style properties }

Examples

.first-name:focus {
  color: red;
}

.last-name:focus {
  color: lime;
}

<input class="first-name" value="I'll be red when focused">
<input class="last-name" value="I'll be lime when focused">

Specifications

Specification	Status	Comment
WHATWG HTML Living Standard The definition of ':focus' in that specification.	Living Standard	Defines HTML-specific semantics.
Selectors Level 4 The definition of ':focus' in that specification.	Working Draft	No change
Selectors Level 3 The definition of ':focus' in that specification.	Recommendation	No change
CSS Level 2 (Revision 1) The definition of ':focus' in that specification.	Recommendation	Initial definition

Browser compatibility