滑块（Slider）出现多余浅蓝色边框的CSS/HTML问题求助

我正在构建滑块组件，但滑块出现了不需要的浅蓝色边框，尝试通过:active伪类样式去除却无效。以下是我的HTML和SCSS代码（内置rem函数可将像素转换为rem）：

HTML代码 #

<div class="slider--toggle">
  <input type="checkbox" id="switch" />
  <label for="switch">
  </label>
</div>

SCSS代码 #

.slider--toggle {
  margin-left: 1rem;
  input[type='checkbox'] {
    height: 0;
    width: 0;
    visibility: hidden;
  }

  label {
    position: relative;
    cursor: pointer;
    width: rem(54);
    height: rem(28);
    background: $border-grey;
    display: block;
    border-radius: rem(200);
  }

  label:after {
    content: '';
    position: absolute;
    top: rem(2);
    left: rem(2);
    width: rem(24);
    height: rem(24);
    background: $bg-light;
    border-radius: rem(200);
    transition: 0.3s;
  }

  input:checked + label {
    background: $primary;
  }

  input:checked + label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
  }

  label:active:after {
    width: rem(35);
  }
}

解决方案 #

你遇到的浅蓝色边框是浏览器默认的焦点轮廓（outline），不是:active状态的样式，所以用:active伪类无效。点击label时，关联的checkbox会获得焦点，由于你把checkbox设为visibility:hidden，焦点会转移到label上，浏览器便会显示默认的焦点边框。

可以通过给label添加:focus伪类样式去除该边框，同时建议保留:focus-visible样式以兼顾无障碍访问需求：

修改后的SCSS代码：

.slider--toggle {
  margin-left: 1rem;
  input[type='checkbox'] {
    height: 0;
    width: 0;
    visibility: hidden;
  }

  label {
    position: relative;
    cursor: pointer;
    width: rem(54);
    height: rem(28);
    background: $border-grey;
    display: block;
    border-radius: rem(200);
    // 去除默认焦点轮廓
    outline: none;
  }

  // 仅在键盘导航时显示自定义焦点样式（可选，兼顾无障碍）
  label:focus-visible {
    outline: 2px solid $primary;
    outline-offset: 2px;
  }

  label:after {
    content: '';
    position: absolute;
    top: rem(2);
    left: rem(2);
    width: rem(24);
    height: rem(24);
    background: $bg-light;
    border-radius: rem(200);
    transition: 0.3s;
  }

  input:checked + label {
    background: $primary;
  }

  input:checked + label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
  }

  label:active:after {
    width: rem(35);
  }
}

若无需无障碍焦点样式，直接给label添加outline: none;即可解决问题。

内容的提问来源于stack exchange，提问作者Tyler Riehl