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
How to read CSS 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 |
---|---|---|
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
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
mfluehr,
erikadoyle,
Sebastianz,
Sheepy,
cvrebert,
dustinpaluch,
MusikAnimal,
tregagnon,
kscarfone,
Stormwind,
alispivak,
Sheppy,
teoli,
brianloveswords,
McGurk,
Jürgen Jeka,
BijuGC
Last updated by:
chrisdavidmills,