与自定义聚焦样式有点乐趣

每个前端开发者都曾或将面临这样的场景：你的老板、客户或设计师认为浏览器在焦点元素上应用的轮廓与UI不匹配，并要求你将其移除。或者你甚至可能自己也想移除它。

因此，你进行了一些研究，发现这是强烈不建议的，因为焦点轮廓的存在是有原因的：它为键盘导航（使用Tab键）提供视觉反馈，让无法使用鼠标或有视觉障碍的用户知道他们在屏幕上的位置。

但这并不意味着你必须保留这个轮廓。与其移除它，不如用其他东西替换它。这样，你就可以保持界面的可访问性，并且获得更多关于外观的灵活性，以便更好地匹配你的UI。

你可以首先通过选择元素的焦点状态并应用outline: none来移除默认的浏览器轮廓。然后，你可以从以下选项中选择一个来替换它：

更改背景颜色

这最适合可以填充的元素，例如按钮。选择元素的焦点状态并为其应用对比鲜明的背景颜色。对比度越高越好，因为细微的变化可能不足以成为强烈的视觉提示，尤其是在色盲和低视力的情况下。

在下面的示例中，背景色和边框颜色都会改变；你可以选择其中一个或两个。

点击或使用Tab键聚焦以查看此状态的外观。

更改文本颜色

如果元素有任何文本，你可以选择焦点状态并更改其颜色。这对于使用mask-image应用的图标也有效；你可以选择作为焦点元素后代的图标并更改其背景颜色，就像下面的示例按钮一样。

同样，对比度是关键。你还可以考虑在文本链接上使用下划线，并将其作为更改状态的一部分，因为正如Web内容无障碍指南所述：

颜色不用作传达信息、指示操作、提示响应或区分视觉元素的唯一视觉手段。（A级） 了解成功标准1.4.1

应用盒阴影

box-shadow属性可以完成与轮廓完全相同的工作，但它功能更强大——你现在可以控制它的颜色、不透明度、偏移量、模糊半径和扩展半径。如果指定了border-radius，则盒阴影也遵循相同的圆角。

你可以用这种技术变得非常有创意（但说真的，不要这样做）：

这几乎适用于任何类型的可聚焦元素，例如切换按钮、复选框、单选按钮和滑块。

增大元素尺寸

作为颜色更改的替代方案，你也可以采用细微的尺寸修改作为焦点反馈。在这个例子中，我们使用transform: scale。

这里的关键是微妙。极端的尺寸变化可能会导致内容重排，更不用说对于那些喜欢减少运动的人来说是一种糟糕的体验了。

复制现有的悬停样式

如果元素已经具有对比鲜明的悬停样式，你可以简单地采用该样式并将其也应用于焦点状态。这是一个相当优雅的解决方案，因为你无需向界面添加任何新的颜色或轮廓。

这是一个示例，其中焦点状态和悬停状态都采用了与元素默认样式的背景形成高对比度的样式：

附加：自定义默认轮廓

到目前为止，我们所看到的一切都假设我们想要完全移除焦点轮廓。我们不必这样做！事实上，它是一个我们可以自定义的边框。

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

如果我们想微调样式，这可以用这种方式编写：

button:focus {
  outline-width: 3px;
  outline-style: dashed;
  outline-color: orange;
}

我们拥有的另一个超能力是outline-offset属性，它与outline速记属性分开，但可以与之一起使用来更改焦点环的位置：

button:focus {
  outline: 3px dashed orange;
  outline-offset: 10px;
}

结论

你可以混合和匹配所有这些选项，以获得适合界面中每个组件类型的自定义样式。

值得重申的是：在采用自定义焦点状态时，不要忘记除了颜色之外还要使用鲜明的颜色对比度和其他视觉提示。当然，我们都希望获得与我们的设计相符的体验，但我们可以在此过程中遵守良好的可访问性实践。W3C 建议使用此工具来测试颜色值相对于 WCAG 指南的对比度。

以上是与自定义聚焦样式有点乐趣的详细内容。更多信息请关注PHP中文网其他相关文章！