因为轨道和滑块由浏览器伪元素控制，直接改input[type="range"]的background只影响外层容器，无法作用于::-webkit-slider-runnable-track等真正控制轨道的伪元素。
为什么直接改 input[type="range"] 的 background 没用？
因为 Bootstrap 5 的 range 滑块默认用了浏览器原生样式，而原生 input[type="range"] 的轨道（track）和滑块（thumb）是伪元素控制的，不是普通盒模型。直接给 input 写 background 只会影响它的外层容器（比如 padding 区域），根本碰不到轨道本身。
真正起作用的是 ::-webkit-slider-runnable-track（Chrome/Safari）和 ::-moz-range-track（Firefox）这类伪元素——但 Bootstrap 5 并没有封装或暴露这些，得自己手动覆盖。
- 必须用
!important才能压过 Bootstrap 的默认规则（它内部用了appearance: none+ 大量重置） - Firefox 下
::-moz-range-track不支持渐变背景，只能用纯色；Chrome/Safari 支持linear-gradient - 别忘了同时重置
::-webkit-slider-thumb和::-moz-range-thumb，否则 thumb 会和新轨道不协调
如何写兼容 Chrome/Firefox 的轨道颜色与高度？
最简可行方案是分别写两套规则，并用 height + border-radius 控制轨道粗细和圆角。注意：Firefox 的 ::-moz-range-track 不接受 background-image，所以颜色统一用 background-color，Chrome 则可以更精细地用渐变。
.form-range {
--range-track-height: 6px;
--range-track-bg: #e9ecef;
--range-track-active-bg: #0d6efd;
}
<p>.form-range::-webkit-slider-runnable-track {
height: var(--range-track-height);
background: linear-gradient(to right, var(--range-track-bg), var(--range-track-bg)) no-repeat,
linear-gradient(to right, var(--range-track-active-bg), var(--range-track-active-bg)) no-repeat;
background-size: 100% 100%, 0% 100%;
border-radius: 3px;
}</p><p>.form-range::-moz-range-track {
height: var(--range-track-height);
background-color: var(--range-track-bg);
border-radius: 3px;
}</p><p>.form-range:focus::-webkit-slider-runnable-track {
background-color: #dee2e6;
}</p><p>.form-range:focus::-moz-range-track {
background-color: #dee2e6;
}- 上面用了 CSS 变量，方便后续调整；
background-size第二项控制“已滑动部分”的宽度（需 JS 动态更新） - Firefox 不支持动态改变
background-size，所以“已滑动进度条”效果只能在 WebKit 内核中实现 - 如果不需要动态进度色，两套都用
background-color更稳妥
怎么让滑块（thumb）和自定义轨道对齐不偏移？
Bootstrap 5 默认把 thumb 的 margin-top 设为负值来垂直居中，但你改了轨道高度后，这个偏移量很可能不准，导致 thumb 悬在轨道上方或陷进去。
立即学习“前端免费学习笔记（深入）”；
- 先清除 Bootstrap 的重置：
.form-range::-webkit-slider-thumb { margin-top: 0; } - 然后用
transform: translateY()微调，比直接改margin更可控 - 推荐公式：
transform: translateY(calc(50% - (var(--range-track-height) / 2)))，确保 thumb 垂直居中于轨道中心线 - Firefox 的
::-moz-range-thumb不支持transform，得用margin-top配合height手动算，例如：轨道高 6px，thumb 高 20px →margin-top: -7px（即 -(20-6)/2）
为什么加了自定义样式后移动端拖动卡顿或失效？
常见原因是伪元素上误加了 pointer-events: none（比如为了透传点击到父容器），或者用 transform 触发了某些 Android WebView 的渲染 bug。
- 检查是否无意中给
::-webkit-slider-runnable-track或::-webkit-slider-thumb加了pointer-events: none—— 这会让滑动完全无响应 - 避免在
thumb上用transform: scale()，某些旧版 Android 浏览器会丢触摸事件 - 如果用 JS 监听
input事件更新background-size，记得节流（throttle），否则快速拖动时 CSS 重绘跟不上 - 真机测试优先选 Chrome for Android 和 Safari iOS，不要只信桌面模拟器
轨道样式看似简单，但跨浏览器、跨设备的细节差一点，滑块就可能“看起来像好了，实际点不动”或者“拖一半就跳变”。最保险的做法是：先在纯 HTML 页面验证伪元素样式生效，再套 Bootstrap 类，最后上真机测触控响应。
