:focus

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's tab key.

/* Selects any <input> element only when focused */
input:focus {
  color: red;
}

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

Syntax

:focus

Examples

HTML

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

CSS

.red-input:focus {
  color: red;
}
.lime-input:focus {
  color: lime;
}

Result

Specifications

Browser compatibility