CSS :focus Selector

What You’ll Learn

The :focus pseudo-class styles elements that currently have focus. It is essential for keyboard navigation, form usability, and accessible web design.

Introduction

The :focus selector in CSS is a pseudo-class used to style an element that is currently focused by the user.

When an input, button, link, or other focusable element receives focus through keyboard interaction (Tab key) or a mouse click, :focus styles help users see which element is active.

Definition and Usage

Append :focus to a selector with no space before the colon: input:focus, button:focus, or a:focus. Styles apply while the element retains focus and disappear when focus moves elsewhere.

📝 Syntax

The syntax for the :focus pseudo-class is:

element:focus {
  /* CSS properties */
}

Basic Example

input:focus {
  outline: none;
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45);
}

Focusable Elements

Syntax Rules

• Focus applies while the element is the active focus target.
• Combine with type selectors: input[type="email"]:focus.
• Chain with other states: button:focus:hover.
• Replace default outline with an equally visible custom indicator.
• Consider :focus-visible for keyboard-only focus rings.

Related Selectors

• :focus-visible — shows focus ring when browser deems it appropriate (often keyboard)
• :focus-within — matches a parent when any descendant has focus
• :hover — matches on mouse-over
• :active — matches while being pressed
• :disabled — disabled elements cannot receive focus

When to Use :focus

:focus is critical for interactive, accessible interfaces:

• Form fields — Highlight the active input so users know where they are typing.
• Buttons — Show a ring or shadow when a button receives keyboard focus.
• Navigation links — Style focused menu items in header and sidebar nav.
• Custom components — Style focus on elements made focusable with tabindex.
• Combined states — Pair with :hover and :active for complete interaction feedback.

Examples Gallery

Practice :focus with form inputs, buttons, links, and the modern :focus-visible pattern.

<style>
  input:focus {
    outline: none;
    border: 2px solid #2563eb;
    background-color: #eff6ff;
  }
</style>

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Enter your email">
  <label for="password">Password:</label>
  <input type="password" id="password" placeholder="Enter your password">
  <button type="submit">Login</button>
</form>

button {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45);
}

a:focus {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 0.25rem;
}

nav a {
  color: #334155;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
}

/* Remove default outline globally */
:focus {
  outline: none;
}

/* Show ring only when appropriate (keyboard) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

⚠️ Common Pitfalls

• Removing outline entirely — *:focus { outline: none; } without a replacement harms keyboard accessibility.
• Low-contrast focus rings — Pale gray outlines on white backgrounds are hard to see.
• Focus traps — Ensure users can Tab out of modals and custom widgets.
• Missing focus on custom controls — Div-based buttons need tabindex="0" and keyboard handlers.
• Confusing :focus with :hover — Focus persists after click; hover does not.

♿ Accessibility

• WCAG requirement — Focusable elements must have a visible focus indicator (Success Criterion 2.4.7).
• Keyboard testing — Tab through your entire page and verify every interactive element shows focus.
• Use :focus-visible — Prefer this for keyboard-only rings when mouse clicks should not show outlines.
• Logical tab order — Focus order should follow visual reading order; use tabindex carefully.
• Do not disable focus — Avoid tabindex="-1" on elements users need to reach via keyboard.

💡 Best Practices