如何为Range滑块Thumb添加键盘聚焦轮廓及方形外框？

1. 键盘聚焦滑块手柄时显示轮廓 #

问题出在::-webkit-slider-thumb伪元素本身不接收焦点，焦点实际落在<input>元素上。得通过输入框的聚焦状态来控制手柄样式：

/* WebKit内核（Chrome、Safari） */
input[type="range"].styled-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid black;
  outline-offset: 5px;
}

/* Firefox兼容 */
input[type="range"].styled-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid black;
  outline-offset: 5px;
}

用focus-visible比focus更友好，只会在键盘聚焦时触发，避免鼠标点击时也显示轮廓。

2. 给圆角手柄加方形轮廓 #

outline会继承元素的border-radius，没法直接做出方形。推荐用box-shadow模拟，简单高效：

input[type="range"].styled-slider:focus-visible::-webkit-slider-thumb {
  /* 保留手柄的圆角 */
  border-radius: 50%;
  /* 第一层shadow是黑色方形边框，第二层用手柄背景色填充圆角空隙 */
  box-shadow: 
    0 0 0 2px black,
    inset 0 0 0 8px #fff; /* #fff要和手柄背景色一致 */
  outline: none; /* 去掉默认outline */
}

/* Firefox同样处理 */
input[type="range"].styled-slider:focus-visible::-moz-range-thumb {
  border-radius: 50%;
  box-shadow: 
    0 0 0 2px black,
    inset 0 0 0 8px #fff;
  outline: none;
}

如果需要更精准的控制，也可以用父容器的伪元素配合JS计算手柄位置来实现，但box-shadow方法足够应对大部分场景。

完整示例代码 #

<div style="width: 30%;">
  <input type="range" class="styled-slider slider-progress" />
</div>

/* 基础滑块样式 */
input[type="range"].styled-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  border: none;
}

/* WebKit手柄 */
input[type="range"].styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  border: 2px solid #444;
  border-radius: 50%;
  cursor: pointer;
}

/* Firefox手柄 */
input[type="range"].styled-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: white;
  border: 2px solid #444;
  border-radius: 50%;
  cursor: pointer;
}

/* 聚焦时的方形轮廓 */
input[type="range"].styled-slider:focus-visible::-webkit-slider-thumb,
input[type="range"].styled-slider:focus-visible::-moz-range-thumb {
  box-shadow: 
    0 0 0 2px black,
    inset 0 0 0 9px white;
}

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