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> when focused */ input:focus { color: red; }
Note: This pseudo-class applies only to the focused element itself. Use :focus-within
if you want to select an element that contains a focused element.
Syntax
:focus
Example
HTML
<input class="red-input" value="I'll be red when focused."><br> <input class="blue-input" value="I'll be blue when focused.">
CSS
.red-input:focus { background: yellow; color: red; } .blue-input:focus { background: yellow; color: blue; }
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 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
chrisdavidmills,
erikadoyle,
Sebastianz,
Sheepy,
cvrebert,
dustinpaluch,
MusikAnimal,
tregagnon,
kscarfone,
Stormwind,
alispivak,
Sheppy,
teoli,
brianloveswords,
McGurk,
Jürgen Jeka,
BijuGC
Last updated by:
mfluehr,