/html5/tutorials/css-pseudo-classes/focus.html

CSS :focus Pseudo-Class

The CSS :focus pseudo-class selects an element while it has focus. Focus identifies the element that is currently ready to receive keyboard input or another form of user interaction.

The :focus Pseudo-Class

The :focus pseudo-class is added directly to a selector with no space between the selector and the colon.

input:focus {
  border-color: #0088cc;
}

The selector input:focus matches an <input> element while that input has focus. When focus moves to another element, the rule no longer matches the original input.

What is Focus?

Focus identifies the element that is currently active for keyboard input or interaction. For example, clicking inside a text field normally gives that field focus so typed characters can be entered into it.

Users can also move focus through many interactive elements with the keyboard, commonly by pressing the Tab key. Links, buttons, and form controls are examples of elements that can normally receive focus.

Using :focus with Form Controls

Form controls are a common use for :focus because a visible style can help show which field is currently ready for input.

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

<label for="name">Name:</label>
<input type="text" id="name" name="name">

When the input receives focus, the border and outline change to make the active field easier to identify.

The same technique can be used with other focusable form controls.

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

Using :focus with Links and Buttons

Links and buttons can receive focus during keyboard navigation, allowing :focus to provide a visible indication of the element that is currently selected for interaction.

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

button:focus {
  outline: 2px solid #0088cc;
}

<a href="/contact.html">Contact Us</a>
<button type="button">Learn More</button>

As focus moves between the link and button, the matching :focus rule can make the focused element visually distinct.

Focus Outlines

Web browsers normally provide a visible focus indicator for focusable elements. This default outline is important because it helps users see where keyboard focus is located.

/* Avoid removing the focus indicator without a replacement */
button:focus {
  outline: none;
}

Removing the outline without providing another visible focus style can make keyboard navigation difficult. If the default focus indicator is changed, provide a replacement that remains easy to see.

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

The replacement outline gives the focused button a clear visual indicator instead of simply hiding the browser's default focus style.

Using :hover and :focus Together

Hover and focus represent different forms of interaction. A mouse or other pointing device can trigger :hover, while keyboard navigation can move :focus between interactive elements.

a:hover {
  color: red;
}

a:focus {
  color: red;
  outline: 2px solid #0088cc;
}

If the same presentation is appropriate for both states, the selectors can share a declaration block.

a:hover,
a:focus {
  color: red;
  text-decoration: underline;
}

Providing appropriate styles for both states helps ensure that visual feedback is not limited to users who interact with a pointing device.

Keyboard users commonly move through interactive elements with the Tab key and move backward with Shift+Tab. As focus moves, CSS :focus rules can identify the currently focused element visually.

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

Clear focus styling is especially important when several links, buttons, or form controls appear close together because it helps users keep track of their position on the page.

:focus and :focus-visible

The :focus pseudo-class matches an element whenever it has focus. The :focus-visible pseudo-class is more selective and matches focused elements when the browser determines that a visible focus indicator should be shown.

button:focus {
  outline: 2px solid #0088cc;
}

button:focus-visible {
  outline: 3px solid #0088cc;
}

This distinction can be useful when designing focus styles for different forms of interaction. The next tutorial covers :focus-visible in detail.

When to Use :focus

Use :focus when an element should have a distinct appearance while it has focus. It is particularly useful for form controls, links, buttons, and other interactive elements that users can reach with a keyboard.

Focus styling should make the current element easier to identify rather than hiding its focused state. When changing the browser's default focus indicator, make sure the replacement remains clearly visible.

Summary

The CSS :focus pseudo-class selects an element while it has focus. Focus can result from keyboard navigation, clicking or otherwise interacting with an element, or other focus-management behavior.

Visible focus styling helps users identify which interactive element is currently ready for input or activation. The next tutorial covers :focus-visible, which allows focus styling to respond more selectively to when a visible focus indicator is appropriate.

:focus Pseudo-Class