我尝试仅当用户通过键盘导航到元素时才有选择地在输入字段上应用大纲。根据我的理解，这样做的方法是在焦点上删除轮廓，但在焦点可见时应用如下：
input:focus {
outline: 2px solid transparent;
}
input:focus-visible {
outline: 2px solid;
}<input type="text">然而，据我所知，输入元素同样注册了单击和键盘选择。我想以某种方式覆盖它。我用的是Chrome，但我也用Safari测试过。
提前感谢您的帮助！
1条答案
按热度按时间xxhby3vn1#
你所看到的行为是期望的（和可取的）。
您希望所有用户（无论是在移动的、平板电脑还是使用鼠标或键盘的台式机上）在输入处于活动状态时都有焦点指示器。
focus-visible相关的时间是用于移动的上的链接之类的事情。通常不希望在单击移动的上的链接时显示焦点指示符。（即使它是否应该显示还是有争议的）。因此，对于
<input>，您应该只使用input:focus{}，并保留:focus-visible用于链接（以及其他一些特定用例，如<button>元素，这些元素会导致焦点更改为另一个元素）。