使用 CSS 伪类更好的焦点样式：focus-visible

我将向您展示如何使用名为:focus-visible. 或者，用简单的英语，我将向您展示如何以正确的方式摆脱这个蓝色轮廓：

删除输入焦点样式（错误的方式）

当您创建一个简单的表单时，用户代理（浏览器）会将自己的样式应用到表单元素（如文本输入、文本区域等）的焦点状态。

这实际上是一个重要的可访问性功能，它允许页面体验受到某种损害的用户正确导航和使用表单。当一个元素处于焦点时，键盘事件将应用于该元素。

浏览器默认使用的非常清晰的蓝色 #2360c5 是一种在可访问性方面使用的有效且实用的颜色，但很有可能它不适用于您的其他设计。

要完全移除这个蓝色轮廓，我们可以使用以下 css 来定位所有焦点状态：

这从风格的角度解决了您的问题，但在这样做时，您将删除视觉上告诉用户哪个元素具有焦点的可访问性提示。换句话说，这不是一个好主意。

更改输入焦点样式（正确的方法）

我们来看看:focus-visible伪类。这适用于元素匹配:focus伪类（换句话说：元素处于焦点）时。

它甚至更进一步，使我们能够区分输入模式（例如，用户是使用键盘还是鼠标关注某个元素）。我将演示如何删除鼠标用户的焦点样式，但保留那些使用键盘导航表单元素的用户的焦点样式。

注意：这不一定是一个完美的可访问性示例，但它符合我们展示:focus-visible功能的目的。 

应用轮廓默认样式

让我们首先确定默认情况下我们的焦点轮廓将如何显示。我们将给重点元素一个实心红色轮廓：

这就是给我们的。重要的是，您会注意到输入和按钮在使用键盘和鼠标聚焦时都会出现红色轮廓：

See the Pen  Create Better Focus Styles with ::focus-visible by Envato Tuts+ (@tutsplus)  on CodePen.

默认情况下，当您用鼠标单击按钮时，浏览器不会为按钮提供可见的焦点样式。这意味着用户正在通过故意单击来执行事件，并且不需要看到焦点。但是，当通过键盘导航到按钮时，它将添加焦点样式。

删除按钮和鼠标组合的焦点样式

让我们通过在用鼠标单击按钮时移除按钮的焦点样式来模拟此行为。

我们可以通过选择任何处于焦点但被浏览器not()考虑的元素来做到这一点。:focus-visible像这样：

添加支持浏览器的增强样式

作为最后一点增强，我们可以为任何具有焦点并被浏览器认为是 :的元素添加紫色轮廓：:focus-visible

这是生成的演示：

See the Pen  Create Better Focus Styles with ::focus-visible by Envato Tuts+ (@tutsplus)  on CodePen.

结论

这总结了如何使用:focus-visible伪类！您现在知道如何制作时尚且易于使用的表格。有