必须先加 appearance: none，否则所有样式都无效；.form-range::-webkit-slider-runnable-track 和 ::-webkit-slider-thumb 均需单独声明 appearance: none 才能生效，Firefox 完全不支持自定义，仅 WebKit 浏览器可用。
必须先加 appearance: none，否则所有样式都无效
直接给 .form-range 写 background 或 height 不会改变轨道颜色或粗细，因为浏览器把轨道（track）和滑块（thumb）藏在伪元素里，不显式禁用原生样式就改不动。几乎所有失败案例都卡在这一步：.form-range::-webkit-slider-runnable-track 前没写 appearance: none。
正确前提只有一条：
-
.form-range::-webkit-slider-runnable-track { appearance: none; }—— 必须放在最前面，否则后续background、height、border-radius全部被忽略 - 这个声明只对 WebKit 浏览器（Chrome/Safari/Edge）生效；Firefox 完全无视它，且至今（2026 年）仍不支持任何轨道定制，只能接受默认灰阶外观
::-webkit-slider-runnable-track 控制的是可拖动区域，不是“背景条”
很多人误以为 ::-webkit-slider-runnable-track 是整个滑块的背景容器，其实它只代表 thumb 实际能滑动的底层轨道区域。它的尺寸直接影响 thumb 的活动范围，而不是视觉上的“装饰条”。
常用调整项：
立即学习“前端免费学习笔记（深入）”；
-
height：设为6px～10px较稳妥，太小（如2px）在 macOS 上可能渲染异常 -
background：推荐用线性渐变，比如background: linear-gradient(to right, #4CAF50, #2196F3);，但注意 Firefox 下完全不显示 -
border-radius：配合height使用，比如height: 8px; border-radius: 4px;能让轨道两端圆润，避免生硬直角 - 别碰
margin或padding—— 这些在伪元素上行为跨浏览器不一致，容易导致 thumb 错位
滑块（thumb）必须单独控制，且依赖 track 的 appearance: none
::-webkit-slider-thumb 的样式只有在 ::-webkit-slider-runnable-track 已设 appearance: none 后才生效。否则它永远是那个小圆点，哪怕你写了 width: 24px 和 border-radius: 50%。
关键实操点：
-
.form-range::-webkit-slider-thumb { appearance: none; }—— 同样不能省，这是 thumb 自定义的前提 - 垂直居中建议用
transform: translateY(-50%)，比margin-top或top更稳定 - 别指望
background-color在深色模式下自动适配，需手动指定不透明色值，如#FF5722而非rgba(255,87,34,0.8) - Firefox 下 thumb 无法定制，所以如果项目需兼容 Firefox，UI 设计上就得接受它始终是灰色小圆点
样式加载顺序和作用域容易被忽略
即使 CSS 写对了，也可能白写——Bootstrap 5 的 .form-range 样式优先级高，自定义规则若没压过它，就会被覆盖。
避坑要点：
- CSS 文件必须放在
bootstrap.min.css之后引入，或者写在</head>底部的<style>块里 - 不要只写
.form-range，而要完整写成.form-range::-webkit-slider-runnable-track，否则选择器权重不够 - 如果用了 Sass，别试图在全局 scope 里覆盖
.form-range，应通过作用域包裹（如.my-slider .form-range）避免污染其他组件 - 检查 DevTools 的 Computed 面板，确认
appearance: none确实被应用，且没被其他规则重置
