CSS :focus Pseudo-Class

CSS :focus Pseudo-Class

The CSS :focus pseudo-class selects an element that currently has input focus. It is commonly used to highlight form fields, buttons, links, and other interactive elements when users select them with a keyboard, mouse, or another input method.

:focus Syntax

:focus {
  property: value;
}

The :focus pseudo-class does not accept arguments. It can be combined with an element selector, class selector, or other selectors to target particular focused elements.

Example Syntax

input:focus {
  border-color: #0088cc;
  outline: 2px solid #0088cc;
}

This rule highlights an input when it receives focus.

The :focus pseudo-class has a specificity of 0-1-0. Combined with the input type selector, its specificity becomes 0-1-1.

Targeting a Specific Class

.search-field:focus {
  background-color: #eaf6fc;
}

This rule changes the background of a focused element with the search-field class.

How :focus Works

Focus identifies the element currently receiving keyboard input or another form of user interaction. When a focusable element receives focus, it matches :focus.

Users can move focus with the Tab key, click certain controls, or interact with the page using assistive technology. JavaScript can also move focus using the focus() method.

Expected Matching Behavior

When focus moves to another element, the previous element stops matching :focus, and the newly focused element begins matching.

Important: Whether clicking an element gives it focus can vary by element type, browser, and operating system. Keyboard navigation is a reliable way to test focus behavior.

Programmatically Moving Focus

document.querySelector("#username").focus();

This JavaScript moves focus to the element with the ID username, provided that the element can receive focus. Its :focus styles then apply.

Focusable Elements

Many HTML elements can receive focus by default. Other elements can be made programmatically or keyboard focusable using the tabindex attribute.

Common Focusable Elements

Text Input

<label for="email">Email:</label>
<input type="email" id="email" name="email">

input:focus {
  outline: 3px solid #0088cc;
  outline-offset: 2px;
}

The input receives the outline when it has focus.

Hyperlink

<a href="/index-css.html">CSS Tutorials</a>

a:focus {
  outline: 2px solid #0088cc;
  outline-offset: 3px;
}

The link receives a visible focus indicator when it has focus.

Custom Focusable Container

<div class="focus-box" tabindex="0">
  Focus this container with the Tab key.
</div>

.focus-box:focus {
  outline: 3px solid #0088cc;
}

The tabindex="0" attribute places the container in the normal keyboard tab sequence. However, making a container focusable does not automatically give it button or link behavior.

Use native interactive HTML elements whenever possible rather than adding tabindex to ordinary containers unnecessarily.

:focus vs. :focus-visible

Both pseudo-classes identify focused elements, but :focus-visible adds a browser-determined condition for when a visible focus indicator is appropriate.

Comparison

Example

button:focus {
  background-color: #eaf6fc;
}
button:focus-visible {
  outline: 3px solid #0088cc;
  outline-offset: 2px;
}

The button's background changes whenever it receives focus. The outline appears when it also matches :focus-visible.

The browser considers factors such as the input method and the element's behavior. For example, a text input may match :focus-visible even after being clicked because keyboard entry is expected.

Use :focus-visible when you want focus indicators to follow browser heuristics. Use :focus when the style should apply whenever an element has focus.

:focus vs. :focus-within

The :focus-within pseudo-class can style a parent container when one of its descendants has focus.

Comparison

HTML

<div class="form-group">
  <label for="full-name">Full Name:</label>
  <input type="text" id="full-name">
</div>

CSS

.form-group:focus-within {
  background-color: #eaf6fc;
}
.form-group input:focus {
  outline: 2px solid #0088cc;
}

When the input receives focus, its outline changes and the surrounding form group receives a highlighted background.

The parent does not need to be focusable itself to match :focus-within.

Practical Uses

The :focus pseudo-class helps users identify the element they are currently interacting with.

Highlighting Form Fields

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #0088cc;
  outline-offset: 2px;
}

This rule provides a consistent focus indicator across common form controls.

Changing a Text Field's Background

.search-input:focus {
  background-color: #eaf6fc;
  border-color: #0088cc;
}

The field changes appearance when it receives focus.

Styling Navigation Links

.main-nav a:focus {
  outline: 2px solid #0088cc;
  outline-offset: 3px;
  text-decoration: underline;
}

This rule makes a focused navigation link easier to identify.

Highlighting Focused Buttons

button:focus {
  outline: 3px solid #27ae60;
  outline-offset: 2px;
}

The button receives a visible outline whenever it has focus.

Combining Focus with Validation

input:invalid:focus {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}
input:valid:focus {
  outline: 2px solid #27ae60;
  outline-offset: 2px;
}

These selectors apply different focus outlines depending on whether the input matches the browser's validity rules.

Do not rely on outline color alone to explain validation errors. Provide readable error messages where appropriate.

Accessibility

Visible focus indicators are important for users who navigate websites with keyboards, switch devices, or other assistive technologies.

Browsers provide default focus indicators for many interactive elements. Custom CSS should preserve or improve their visibility.

Accessible Focus Indicator

a:focus,
button:focus,
input:focus {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

The outline appears outside the element, making it easier to see without changing the element's dimensions.

Avoid Removing Focus Outlines Without Replacement

button:focus {
  outline: none;
}

This rule removes the outline without providing a replacement and can make keyboard navigation difficult.

Providing a Replacement Indicator

button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Use a clearly visible indicator that contrasts with the element and its surroundings.

For accessibility, test focus indicators with keyboard navigation, including the Tab and Shift+Tab keys. Focus should remain visible and should follow a logical navigation order.

Best Practices

• Use :focus to style elements that currently have input focus.
• Preserve a visible focus indicator for keyboard users.
• Do not remove the browser's default outline unless you provide a suitable replacement.
• Use :focus-visible when focus indicators should follow browser heuristics.
• Use :focus-within when a parent container should respond to a focused descendant.
• Prefer native interactive elements such as <button> and <a> over custom focusable containers.
• Use tabindex="0" only when an element needs to participate in sequential keyboard navigation.
• Avoid positive tabindex values because they can create confusing navigation orders.
• Use outline-offset to create space between the element and its focus outline.
• Test focus styles with both keyboard and pointer input.
• Do not rely only on color changes when a more visible outline or border would improve clarity.
• Remember that focus can change dynamically through JavaScript.

:focus Example

This example demonstrates how :focus changes the appearance of form fields. Click an input or use the Tab key to move between controls. The currently focused field receives a blue outline and a light blue background.

HTML

<div class="focus-demo">
  <label for="demo-name">Name:</label>
  <input type="text" id="demo-name" placeholder="Enter your name">
  <label for="demo-email">Email:</label>
  <input type="email" id="demo-email" placeholder="Enter your email">
  <label for="demo-message">Message:</label>
  <textarea id="demo-message" rows="3" placeholder="Enter a message"></textarea>
  <button type="button">Continue</button>
</div>

CSS

.focus-demo label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.focus-demo input,
.focus-demo textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid #999;
  border-radius: 0;
  background-color: #fff;
  font: inherit;
}
.focus-demo input:focus,
.focus-demo textarea:focus {
  outline: 3px solid #0088cc;
  outline-offset: 2px;
  background-color: #eaf6fc;
}
.focus-demo button {
  padding: 8px 12px;
  border: 0;
  background-color: #0088cc;
  color: #fff;
  cursor: pointer;
}
.focus-demo button:focus {
  outline: 3px solid #27ae60;
  outline-offset: 3px;
}

Browser Result

When a text field or textarea receives focus, its background becomes light blue and a blue outline appears. The Continue button receives a green outline when focused. Moving focus to another control automatically removes the previous focus styling.

Play in Editor

Browser Support

Baseline: Widely available. The :focus pseudo-class has been supported across major browser engines for many years and works in modern versions of Chrome, Edge, Firefox, Safari, and other browsers.

Focus behavior can differ slightly depending on the browser, operating system, element type, and input method. The CSS selector itself is widely supported.

For current compatibility information, visit Can I Use? .

Specifications

The :focus pseudo-class is defined in Selectors Level 4 as a user-action pseudo-class. Its behavior is also described in the HTML Living Standard's focus processing model.

Selectors Level 4 - The :focus Pseudo-Class

HTML Living Standard - Focus