CSS自定义开关focus状态在各浏览器均不生效，寻求解决方案

你的问题出在两个关键细节上：

• 未限定:checked选择器的作用范围，存在全局匹配风险
• CSS规则顺序错误，导致focus-visible的高亮样式被覆盖

修正后的完整代码 #

CSS

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);
}

/* 限定为input元素的checked状态，避免全局影响 */
input:checked {
  background: green;
}

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

/* 先定义常规focus的取消outline */
input:focus {
  outline: none;
  outline-color: transparent;
}

/* 后定义focus-visible的高亮样式，确保优先级生效 */
input:focus-visible {
  outline: 2px solid dodgerblue;
  outline-offset: 2px;
}

HTML

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

核心修正说明 #

1. 限定:checked选择器范围：将原本的:checked改为input:checked，确保样式只作用于目标复选框，不会意外影响其他可选中元素
2. 调整CSS规则顺序：把input:focus放在input:focus-visible之前，相同优先级下，后声明的规则会覆盖前序规则。这样当浏览器识别到键盘聚焦（触发focus-visible）时，高亮边框样式就能正常生效，不会被outline: none覆盖

现在用Tab键切换到开关时，就能看到预期的dodgerblue高亮边框效果了。

内容的提问来源于stack exchange，提问作者Luca Giona