: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 />

:focus rules are not applied