首页 > web前端 > css教程 > 如何启用:仅关注键盘使用(或按 Tab 键)?

如何启用:仅关注键盘使用(或按 Tab 键)?

Patricia Arquette
发布: 2024-10-29 23:55:29
原创
1035 人浏览过

How to Enable :focus Only on Keyboard Use (or Tab Press)?

仅在键盘使用(或按 Tab 键)时启用 :focus

概述

在不需要时禁用 :focus 可以通过消除来增强用户体验令人困惑的视觉线索。然而,为键盘用户维护焦点功能至关重要。

原始解决方案:仅键盘焦点样式

Roman Komarov 的解决方案利用 CSS 和 HTML 来实现仅键盘焦点样式。它将可聚焦元素封装在容器元素中,并仅对内部元素设置样式,使键盘用户可以直观地访问焦点状态。

改进的解决方案::focus-visible 伪类

更新: :focus-visible 伪类提供了一种更优雅、更有效的方法来实现仅键盘焦点样式。 浏览器现在仅在增强用户体验时才指示焦点,例如在键盘交互期间。

要使用 :focus-visible,请在 CSS 规则中将 :focus 替换为 :focus-visible。这可确保焦点样式仅在通过键盘或非指点设备激活时可见。

向后兼容性

不支持 :focus-visible 的浏览器将显示默认焦点环。为了提供一致的用户体验,Šime Vidas 建议在 :focus 中定义焦点样式并在 :focus:not(:focus-visible) 中恢复它们。

CSS 示例:

<code class="css">button:focus {
  outline: none;
  background: #ffdd00;
}

button:focus:not(:focus-visible) {
  background: white;
}</code>
登录后复制

HTML 示例:

<code class="html"><button class="btn">
  <span class="btn__content" tabindex="-1">...</span>
</button></code>
登录后复制

注释:

  • 使用 tabindex 属性使不可聚焦的元素可聚焦。
  • 确保您的 CSS 足够具体以覆盖默认的焦点样式.
  • 考虑使用 :focus-within 在子元素获得焦点时设置父元素的样式。

结论

通过利用 :focus-visible 伪类或实现原始解决方案后,开发人员可以提供仅键盘焦点样式,而不会影响键盘和鼠标用户的用户体验。

以上是如何启用:仅关注键盘使用(或按 Tab 键)?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板