输入字段添加焦点-点击可见

Question

仅当用户通过键盘导航到元素时，我才尝试在输入字段上有选择地应用轮廓。根据我的理解，这样做的方法是删除焦点轮廓，但像这样应用焦点可见：

input:focus {
  outline: 2px solid transparent;
}

input:focus-visible {
  outline: 2px solid;
}

<input type="text">

然而，据我所知，输入元素同样注册了点击和键盘选择。我想以某种方式覆盖它。我正在使用 Chrome，但也在 Safari 上进行了测试。

提前感谢您的帮助！

Answer 1

您看到的行为是预期的（并且是可取的）。

您希望所有用户（无论是使用鼠标或键盘的移动设备、平板电脑还是台式机）在输入时都具有焦点指示器。

focus-visible

相关的时间是移动链接之类的东西。当您在移动设备上单击链接时，通常不希望显示焦点指示器。 （尽管它是否应该显示是有争议的）。

因此，对于

<input>

，您应该只使用

input:focus{}

并为链接保留

:focus-visible

（以及一些其他特定用例，例如

<button>

元素，导致焦点更改为另一个元素）。