按住鼠标时Toggle控件的Focus Outline消失，如何修复？

问题描述：聚焦这个自定义Toggle控件时，能正常显示预期的outline，但按住主鼠标按钮期间，outline会消失，需要纯CSS解决。

原因分析 #

当按住鼠标按钮时，元素会触发:active状态，部分浏览器的默认行为会让:focus样式被覆盖，导致outline消失。我们需要明确指定聚焦且激活状态下的样式，确保outline持续显示。

解决方案 #

修改CSS中控制outline显示的选择器，同时包含:focus和:focus:active状态：

:root {
  --color-mint: #02b689;
  --color-white: #ffffff;
  --color-silver: #c2c2c2;
  --focus-color: #3b3e3f;
  --focus-opacity: 0.5;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 26px;
}

.toggle input {
  width: 0;
  height: 16px;
  pointer-events: none;
}

.toggle_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-silver);
  transition: .3s;
  border-radius: 26px;
}

.toggle_slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-white);
  transition: .3s;
  border-radius: 50%;
}

.toggle_slider::after {
  content: "";
  border-radius: 26px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid var(--focus-color);
  margin: -3px;
  opacity: 0;
}

input:checked+.toggle_slider {
  background-color: var(--color-mint);
}

input:checked+.toggle_slider:before {
  transform: translateX(34px);
}

/* 修改这里，添加:focus:active状态 */
.toggle input:focus+.toggle_slider::after,
.toggle input:focus:active+.toggle_slider::after {
  opacity: var(--focus-opacity);
}

HTML部分保持不变：

<label class="toggle">
    <input type=checkbox aria-hidden="true" />
    <span class="toggle_slider round"></span>
</label>

原理说明 #

:focus:active选择器匹配同时处于聚焦和激活状态的元素，这样即使按住鼠标触发了:active，只要元素还保持聚焦，outline的样式就不会被覆盖，完美解决按住鼠标时outline消失的问题。

内容的提问来源于stack exchange，提问作者Peter Morris