← Back to pseudo-classes

CSS Pseudo-class / Element

:focus

User Action

Applies styles when an element has received focus, typically via keyboard or click.

Syntax

selector:focus { }

Example

input:focus { outline: 2px solid #3dffa0; }

Common use cases

  • Styling focused form inputs
  • Keyboard navigation indicators
  • Accessible focus rings on interactive elements

Practical developer insight

Never remove outline on :focus without replacing it — it breaks keyboard accessibility.

Related

:focus-visible:focus-within:hover