:focus
The :focus pseudo-class matches the element that currently has keyboard or programmatic focus.
Syntax
selector:focus { }Examples
input:focus {
outline: 2px solid royalblue;
outline-offset: 2px;
}
Output
Draws a clear blue focus ring around an input while it is focused.
Notes
Never remove focus outlines without a visible replacement; this breaks keyboard accessibility. Prefer :focus-visible to show rings only for keyboard users while suppressing them on mouse click.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |