CSS Focus States

What Are CSS Focus States?

A focus state appears when an element receives keyboard or programmatic focus. For example, when a user presses the Tab key, the browser moves focus from one interactive element to the next.

Focus states are important because keyboard users need a clear visual indicator showing where they are on the page.

button:focus {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

Why CSS Focus States Matter

• They help keyboard users navigate websites.
• They improve accessibility for users with motor disabilities.
• They make forms, buttons, menus, and links easier to use.
• They support WCAG-friendly accessible design.
• They improve usability on desktop, mobile, and assistive devices.
• They reduce confusion in complex interfaces such as dashboards and forms.

CSS Focus States Cheatsheet

The following table shows the most important CSS focus selectors and when to use them.

:focus vs :focus-visible

The :focus selector applies whenever an element receives focus. The :focus-visible selector applies when the browser decides the focus indicator should be shown, usually for keyboard navigation.

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

CSS :focus-within

The :focus-within selector styles a parent element when any child inside that parent receives focus. It is useful for forms, search boxes, cards, dropdowns, and grouped controls.

.form-field:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
}

.form-field:focus-within label {
  font-weight: 700;
}

<div class="form-field">
  <label for="email">Email Address</label>
  <input id="email" name="email" type="email" />
</div>

Accessible Focus Ring Example

A good focus ring should be clearly visible, have enough contrast, and not depend only on subtle color changes.

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.btn:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.25);
}

Focus States for Links

Links should have a clear focus state so users can navigate menus, breadcrumbs, article links, and footer links with the keyboard.

a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: 0.25rem;
}

Focus States for Buttons

Buttons trigger actions, so their focus states must be easy to see. Do not remove the default outline unless you replace it with an accessible custom style.

button:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Focus States for Form Fields

Form fields should clearly show when they are active. This helps users complete forms faster and reduces input errors.

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
  border-color: #0d6efd;
}

input:invalid:focus-visible {
  outline-color: #dc3545;
  border-color: #dc3545;
}

Skip Link Focus State

A skip link allows keyboard users to jump directly to the main content. It is usually hidden until it receives focus.

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<main id="main-content">
  <h1>CSS Focus States</h1>
</main>

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  padding: 0.75rem 1rem;
  background: #fff;
  color: #111;
  z-index: 1000;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #0d6efd;
}

Focus States and Accessibility

Accessible focus states help users who cannot use a mouse. This includes keyboard users, switch device users, screen reader users, and users with temporary injuries.

• Make focus indicators easy to see.
• Use strong contrast between the focus ring and background.
• Do not rely only on color if the change is too subtle.
• Keep focus order logical.
• Avoid keyboard traps inside menus, dialogs, or custom widgets.

Do Focus States Help SEO?

Focus states do not directly rank a page, but they improve accessibility, usability, engagement, and page quality. Better keyboard navigation can reduce user frustration and support a more inclusive user experience.

• Better navigation improves user experience.
• Accessible design supports broader audience reach.
• Clear interaction states improve conversion paths.
• Good CSS accessibility supports overall page quality.

How to Test Focus States

You can test focus states manually using only the keyboard.

1. Open the page in a browser.
2. Press the Tab key to move forward.
3. Press Shift + Tab to move backward.
4. Check that every interactive element has a visible focus style.
5. Press Enter or Space on buttons and links.
6. Make sure focus does not get trapped unexpectedly.

Tools for Testing Focus States

Common Focus State Mistakes

• Removing outlines with outline: none; and not replacing them.
• Using focus styles that are too subtle.
• Using only color changes with poor contrast.
• Making custom elements clickable but not keyboard focusable.
• Creating modals or menus where focus gets trapped incorrectly.
• Using positive tabindex values that create confusing focus order.
• Testing only with a mouse and not with a keyboard.

Bad Example

button:focus {
  outline: none;
}

Better Example

button:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

CSS Focus State Best Practices

• Use :focus-visible for modern keyboard-friendly focus styling.
• Keep focus indicators visible and high contrast.
• Use outline because it does not affect layout.
• Add outline-offset for better visibility.
• Use :focus-within for grouped controls and form containers.
• Do not remove browser focus styles unless you provide a better replacement.
• Test all links, buttons, inputs, menus, cards, tabs, dialogs, and custom controls.

Key Takeaways

• Focus states show which element is currently active.
• Visible focus indicators are essential for keyboard accessibility.
• :focus-visible is usually better for modern focus styling.
• :focus-within is useful for styling parent containers.
• Never remove focus outlines without adding an accessible replacement.
• Always test focus behavior using keyboard navigation.