CSS - 焦点在任何浏览器上都不起作用为什么？

Question

嗨，我真的从来没有遇到过这个问题，但今天我不太明白为什么焦点不起作用 - 我尝试在不使用 js 的情况下构建一个自定义开关 --- 它看起来不错，并且使用鼠标可以正常工作。不幸的是不是焦点状态 -

但这是代码：

input {
  appearance: none;
  position: relative;
  display: inline-block;
  background: lightgrey;
  height: 1.65rem;
  width: 2.76rem;
  vertical-align: middle;
  border-radius: 2rem;
  box-shadow: 0px 1px 3px #0003 inset;
  transition: 0.25s linear background;
}

input::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: #fff;
  border-radius: 1.2rem;
  position: absolute;
  top: .2rem;
  left: .2rem;
  box-shadow: 0px 1px 3px #0003;
  transition: 0.25s linear transform;
  transform: translateX(0rem);
}

:checked {
  background: green;
}

:checked::before {
  transform: translateX(1rem);
}

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

input:focus {
  outline: none;
  outline-color: transparent;
}

`

<label for="awesomeFeature">
  <input type="checkbox" name="awesomeFeature" id="awesomeFeature">
  my awesome feature
 </label>

我期待焦点突出显示

Answer 1

这是因为当元素获得焦点时，CSS 选择器

input:focus-visible

和

input:focus

都是匹配的。

:focus-visible

不比:focus更

具体

。在没有任何其他选择器的情况下，浏览器会认为您的

input:focus-visible

和

input:focus

选择器彼此同等重要。现在，您的

input:focus-visible

规则具有可见的轮廓，但您的

input:focus

规则具有

none

的轮廓。浏览器无法同时执行这两项操作，因此它会选择该特定性的最终规则作为应用的规则。

input:focus

的规则获胜，元素的轮廓为

none

。

要解决此问题，您可以重新排序 CSS：

input:focus {
  outline: none;
  outline-color: transparent;
}
input:focus-visible {
  outline: 2px solid dodgerblue;
  outline-offset: 2px;
}