问题标签 [focus-visible]

我正在使用 Material UI - 单选按钮

我想覆盖他们的 focusVisible 属性，您可以在其中仅通过键盘将样式应用于焦点复选框

我可以定位输入并使用本机焦点可见状态并应用样式，但旧浏览器不太支持它。

Material UI 实现了自己的 focusVisible 状态，但无法弄清楚如何覆盖它。有什么建议么？

根据https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible上的示例（在基本示例下），使用我的占位符“:focus-visible only”单击输入鼠标不应该显示橙色轮廓样式 - 但确实如此。Caniuse.com 告诉我，我的 chrome 版本支持 :focus-visible。

有什么提示吗？

我在按钮上设置了一个focus-visible状态。该按钮的边框半径为 4px，并且焦点状态添加了一个带有边框半径的盒子阴影。但是，当我点击按钮时，外边框的半径不是 4px。我怎样才能让那些外边界角的半径为 4px，就像按钮一样？

*这些按钮只能通过键盘导航。单击它们不会提供焦点状态。

几乎与此相同的问题：
如何在 Mozilla Firefox 89 中删除焦点复选框的不必要的蓝色轮廓

但是：
使用键盘导航表单（使用TAB键）仍然会在复选框/单选按钮周围显示相同的样式。
这些样式应该是:focus-visible样式，但以下内容不会删除它们：

我还尝试使用box-shadow. 没运气。border!important

是否有 CSS 解决方案来删除围绕键盘焦点复选框/单选按钮的这些新的 Firefox 样式？

我正在做一个大型项目，我必须针对整个网站的按钮和链接的键盘焦点状态。这是一个非常大的网站，并且创建了很多年的链接。

我已经设法定位按钮和特定的动画链接（参见键盘导航示例），但我似乎无法定位其他链接或ul > li > a链接。

我如何定位这些其他链接？

我有一个大型站点，并且有数百个没有href附加属性的锚标记。与其冒险进行搜索/替换和添加href="#"，我更愿意使用 CSS 来定位它们。我正在尝试将焦点状态应用于这些，但事实证明这很困难。我正在使用以下内容:not([href])来定位那些非 href 链接，但我似乎无法专注于它。

我为我网站上的所有链接创建了一些焦点状态。按钮焦点很棒。当链接被包装时，我正在努力向链接添加内联焦点状态。如果您查看示例，如果链接不换行，那很好。但是，当它换行时，我最终会在链接的开头出现一个焦点“正方形”，但它不会扩展到整个链接。

如何使包装的链接看起来像非包装的链接？

如果您愿意，这里有一个Codepen 。

我正在使用 Algolia React Instant 搜索包为 React 中的 Web 项目开发高级搜索功能。

我在键盘导航方面有点挣扎。

搜索结果包含一长串具有各种 URL 的文章。该列表仅使用 Tab 键导航非常麻烦，因此我使用箭头键实现了导航，效果非常好。

但是，我偶然发现了一个问题，我不确定如何解决关于焦点可见的问题。当使用箭头键导航时，组件内的功能将使用 element.focus();

如果我用鼠标聚焦搜索字段并使用箭头键开始导航，则焦点可见轮廓丢失。但是，如果我使用 Tab 键导航到搜索字段并使用箭头键开始导航，则焦点可见轮廓是可见的。这是根据规范，因为 focus() 不会更改为焦点可见，并且最后一次导航是用鼠标完成的。

但这使得无法使用按键进行导航 - 您不知道焦点所在的元素。知道如何在以编程方式设置焦点时强制浏览器认为我正在使用键盘导航吗？

:focus样式应该覆盖吗:focus-visible？

我正在尝试使站点键盘可访问并:focus-visible尽可能应用我自己的样式。

我的:focus-visible样式可以成功地与我的大多数按钮元素一起使用，但不能与我的“注销”按钮一起使用，其中一些 twitter 引导focus样式覆盖了我自己的focus-visible样式，尽管引导导入语句的优先级较低。

如何让:focus-visible造型比:focus造型更重要？

更新： 下面是 DevTools 屏幕截图的链接，其中列出的前 3 个样式表是 node_modules 文件夹中的标准引导程序。第 4 个样式表是我自己的，它试图设置:focus-visible元素的样式。 Devtools 总结截图

HTML 按钮：

我的 SCSS：

引导 SCSS：

目前，当我使用键盘点击按钮时，引导focus样式适用于:focus-visible我设置的样式。

我对 CSS 伪类的启发式行为感到困惑:focus-visible。

在我们的应用程序中，我们在某些地方有下拉菜单。我注意到，当我刷新页面时，:focus:focus-visible鼠标悬停在新打开的下拉列表（其项目）上。

但是，一旦我基本上单击应用程序中的任何按钮，例如只是重新打开下拉菜单，焦点可见伪将不再适用。

看视频：

我目前已将轮廓颜色更改为更微妙，因为这对我来说确实是一种意外行为，但我不想在用户使用键盘导航时丢失轮廓。

有人可以解释一下鼠标悬停行为发生了什么吗？