MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Summary

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.

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

Syntax

:focus

Example

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
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 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,