css - :focus-visible? 的 chrome 问题(在正常鼠标焦点上显示焦点可见样式)

Question

根据https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible上的例子(在基本示例下)，用我的鼠标单击带有占位符“:focus-visible only”的输入不应显示橙色轮廓样式——但它会显示。Caniuse.com 告诉我，我的 chrome 版本支持 :focus-visible。

有什么提示吗？

Answer 1

working draft spec声明浏览器制造商可以自由选择他们自己的匹配标准 :focus-visible 而不是常规的旧 :focus，但规范确实推荐了一些建议来使用作为起点，包括:

Any element which supports keyboard input (such as an input element...) should always match :focus-visible when focused.

对我来说，这意味着所有输入元素都应该始终匹配 :focus-visible。

在您引用的示例中，您会注意到按钮行为符合预期。如果你用鼠标点击按钮，它不匹配 :focus-visible，但如果你用键盘导航选择它，那么它匹配。