chrome 问题：焦点可见？（显示正常鼠标焦点上的焦点可见样式）

Question

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

\n

有什么提示吗？

\n

Answer 1

工作草案规范指出，浏览器制造商可以自由选择自己的匹配标准:focus-visible，而不仅仅是常规的旧标准:focus，但该规范确实建议了几条建议作为起点，包括：

任何支持键盘输入的元素（例如输入元素...）:focus-visible在获得焦点时应始终匹配。

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

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