:focus 规则不适用

Question

我正在尝试使用:focus 伪类将不同的样式应用于一个元素。在一个非常基本的层面上，我有这样的事情：

input {
  border: 1px solid red;
}

input:focus {
  border: 1px solid blue;
}

<input type="text">

我希望输入字段的边框在聚焦（单击）时变为蓝色，但它却变为黑色。这是为什么呢？

Answer 1

这是由您的浏览器应用的。 Google Chrome 的默认用户代理样式表（可能还有其他浏览器）具有以下规则

:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

因此，您也需要覆盖此规则，例如

input:focus-visible {
  outline: unset;
}

input:focus {
  border-color: red;
}

input:focus-visible {
  outline: unset;
}

<input />