Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Summary

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

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

Document Tags and Contributors

 Last updated by: Sebastianz,