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

Specification Status Comment
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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 8.0 7.0 1.0
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (Yes) 1.0 (1) 8.0 6.0 1.0

Document Tags and Contributors

 Last updated by: mfluehr,