css - 铬问题：焦点可见？（在普通鼠标焦点上显示焦点可见样式）

Question

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

有什么提示吗？

Answer 1

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

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

对我来说，这表示所有输入元素都应始终匹配:focus-visible。

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

Answer 2

CSS为我工作

台式机

.momsType:focus-visible{
 outline:none!important;
}

对于手机

.momsType:focus{
outline:none!important;

}