遗憾的是，浏览器在应用焦点方面可能不一致。元素是否获得焦点可能取决于浏览器和操作系统。

例如，以下 为其 :focus 状态设置了自定义 CSS。

button:focus {

outline: 4px dashed orange;

}

如果您在 macOS 上的 Chrome 中使用鼠标点击

，应该会看到其自定义焦点样式。不过，如果您在 macOS 上的 Safari 中点击 ，则不会看到自定义焦点样式。这是因为在 Safari 中，当您点击元素时，该元素不会获得焦点。

注意： 请阅读有关

焦点行为的信息，以确定哪些浏览器和操作系统会将焦点应用于 。

焦点行为不一致。在不同设备上使用不同输入测试网页，确保焦点样式能让用户接受。

使用 :focus-visible 有选择地显示焦点指示器

当元素获得焦点，并且浏览器（通过启发式方法）确定显示焦点指示器对用户有益时，系统会应用 :focus-visible 伪类。具体来说，如果最近一次用户互动是通过键盘进行的，并且按键操作不包含 meta、ALT、OPTION 或 CONTROL 键，则 :focus-visible 会匹配。

以下示例中的按钮会有选择性地显示焦点指示标志。如果您使用鼠标点击，结果会与您先使用键盘切换到该元素的结果不同。

button:focus-visible {

outline: 4px dashed orange;

}

使用 :focus-within 设置聚焦元素的父元素的样式

当元素本身或其子元素获得焦点时，:focus-within 伪类会应用于该元素。它可用于突出显示网页的某个区域，以吸引用户注意该区域。

例如，当表单本身被选中时，以及当表单的任何单选按钮被选中时，表单都会获得焦点。

form:focus-within {

background: #ffecb3;

}

何时显示焦点指示器

一个很好的问题是问问自己：“如果您在使用移动设备时点击此控件，您是否希望它显示键盘？”

如果为“是”：无论输入设备是什么，控件都应始终显示焦点指示器。例如， 元素几乎总是如此。用户需要使用键盘向元素发送输入内容，无论输入元素如何获得焦点。

如果为“否”：控件可以选择性地显示焦点指示器。例如，当用户使用鼠标或在触摸屏上点击

时，操作即完成。焦点指示器可能是不必要的。不过，如果用户使用键盘进行导航，最好显示焦点指示器，以便用户决定是否要使用 ENTER 或 SPACE 键激活控件。

避免使用 outline: none

坦白地说，浏览器决定何时绘制焦点指示器的方式非常令人困惑。使用 CSS 更改

元素的外观或为元素提供 tabindex 会触发浏览器的默认焦点环行为。

有时，开发者会使用 CSS 移除焦点指示器：

/* Don't do this!!! */

:focus {

outline: none;

}

解决此问题的更好方法是结合使用 :focus 和 :focus-visible polyfill。第一个代码块展示了填充区的运作方式，下面的示例应用展示了如何使用填充区来更改按钮上的焦点指示器。

/*

This hides the focus indicator if the element receives focus with a

mouse, but it still shows 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 {

...

}