Style focus

The focus indicator (often signified by a "focus ring") identifies the currently focused element on your page. For users who are unable to use a mouse, this indicator is extremely important because it acts as a stand-in for their mouse-pointer.

If the browser's default focus indicator clashes with your design, you can use CSS to restyle it. Just remember to keep your keyboard users in mind!

The :focus pseudo-class is applied any time an element is focused, regardless of the input device (mouse, keyboard, stylus, etc.) or method used to focus it. For example, the <div> below has a tabindex which makes it focusable. It also has a custom style for its :focus state:

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

Regardless of whether you use a mouse to click on it or a keyboard to tab to it, the <div> will always look the same.

Unfortunately browsers can be inconsistent with how they apply focus. Whether or not an element receives focus may depend on the browser and the operating system.

For example, the <button> below also has a custom style for its :focus state.

button:focus {
  outline: 4px dashed orange;
}

If you click on the <button> with a mouse in Chrome on macOS you should see its custom focus style. However, you will not see the custom focus style if you click on the <button> in Safari on macOS. This is because in Safari the element does not receive focus when you click on it.

Because the behavior of focus is inconsistent, it may require a bit of testing on different devices to ensure your focus styles are acceptable to your users.

Use :focus-visible to selectively show a focus indicator

The new :focus-visible pseudo-class is applied any time that an element receives focus and the browser determines via heuristics that displaying a focus indicator would be beneficial to the user. In particular, if the most recent user interaction was via the keyboard and the key press did not include a meta, ALT / OPTION, or CONTROL key, then :focus-visible will match.

The button in the example below will selectively show a focus indicator. If you use a mouse to click on it, the results are different than if you first use a keyboard to tab to it.

button:focus-visible {
  outline: 4px dashed orange;
}

Use :focus-within to style the parent of a focused element

The :focus-within pseudo-class is applied to an element either when the element itself receives focus or when another element inside that element receives focus.

It can be used to highlight a region of the page to draw the user's attention to that area. For example, the form below receives focus both when the form itself is selected and also when any of its radio buttons are selected.

form:focus-within {
  background: #ffecb3;
}

When to display a focus indicator

A good rule of thumb is to ask yourself, "If you clicked on this control while using a mobile device, would you expect it to display a keyboard?"

If the answer is "yes," then the control should probably always show a focus indicator, regardless of the input device used to focus it. A good example is the <input type="text"> element. The user will need to send input to the element via the keyboard regardless of how the input element originally received focus, so it's helpful to always display a focus indicator.

If the answer is "no," then the control may choose to selectively show a focus indicator. A good example is the <button> element. If a user clicks on it with a mouse or touch screen, the action is complete, and a focus indicator may not be necessary. However, if the user is navigating with a keyboard, it's useful to show a focus indicator so the user can decide whether or not they want to click the control using the ENTER or SPACE keys.

Avoid outline: none

The way browsers decide when to draw a focus indicator is, frankly, very confusing. Changing the appearance of a <button> element with CSS or giving an element a tabindex will cause the browser's default focus ring behavior to kick-in.

A very common anti-pattern is to remove the focus indicator using CSS such as:

/* Don't do this!!! */
:focus {
  outline: none;
}

A better way to work around this issue is to use a combination of :focus and the :focus-visible polyfill. The first block of code below demonstrates how the polyfill works, and the sample app beneath it provides an example of using the polyfill to change the focus indicator on a button.

/*
  This will hide the focus indicator if the element receives focus via the
  mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step, then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  
}