直接写 .form-range { background: red } 无效，因 Bootstrap 5 的 .form-range 仅处理布局与禁用态，滑块（thumb）和轨道（track）样式须通过 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track 伪元素定制，且 Firefox 完全不支持 range 自定义样式。
不能只改 .form-range 类本身，必须用 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track 伪元素单独覆盖；Firefox 下还得额外加 scrollbar-color 类似的逻辑——但注意：它对 range 滑块无效，Firefox 压根不支持 range 的伪元素定制。
为什么直接写 .form-range { background: red } 没用
Bootstrap 5 的 .form-range 只负责基础布局、尺寸和禁用态处理，所有滑块（thumb）和轨道（track）的视觉样式都由浏览器原生控制，且强制通过伪元素暴露。你写的普通 CSS 规则无法命中这些伪元素，除非显式写出完整伪类链。
-
.form-range本身只是个容器类，不包含任何background或border样式作用于 thumb - Chrome/Safari/Edge 中，
::-webkit-slider-thumb是唯一可操作的 thumb 入口，漏掉::-webkit-前缀就完全失效 - Firefox 不识别任何
::-webkit-伪元素，且目前（2026 年）仍 不支持input[type="range"]的自定义样式，只能接受其默认灰阶外观
::-webkit-slider-thumb 必须设 appearance: none 才生效
这是最容易卡住的一步：如果不先清除浏览器默认样式，后续所有宽高、背景、圆角设置都会被忽略。
- 必须在同一条规则里写：
.form-range::-webkit-slider-thumb { appearance: none; } -
appearance: none后才能安全设width/height，比如width: 24px; height: 24px; - 记得加
background-color，否则 thumb 透明不可见；如果用渐变或图片，要确保有 fallback 色值 - 别设
margin，它在不同浏览器中行为不一致；用transform: translateY()微调垂直居中更可靠
::-webkit-slider-runnable-track 的宽度和颜色控制
轨道不是“背景条”，而是可拖动区域的底层载体，它的样式直接影响 thumb 的运动范围感。
立即学习“前端免费学习笔记（深入）”；
-
.form-range::-webkit-slider-runnable-track必须设background，否则显示浏览器默认纹理 - 想做细轨道？不要调
height，那是 thumb 的事；改height在 track 上基本无效，应靠border-radius和上下 padding 视觉压缩 - 推荐写法：
background: #e0e0e0; border-radius: 8px; height: 6px;（部分新版 Chromium 支持height，但兼容性差，慎用） - 如需禁用时变灰，补充：
.form-range:disabled::-webkit-slider-runnable-track { background: #ccc; }
Firefox 下的现实妥协方案
目前没有标准 API 让 Firefox 自定义 range 滑块，所谓“兼容写法”全是徒劳。别浪费时间试 scrollbar-width 或 @supports 查询。
- Firefox 用户看到的就是系统级默认滑块（通常是浅灰圆角矩形），无法着色、缩放或换形
- 如果项目必须统一外观，唯一可行路径是用
<div> + JavaScript 重写整个 range 交互（比如基于 <code>input事件监听 + 绝对定位 thumb 元素） - 轻量级项目建议接受双轨现实：WebKit 系列精细控制，Firefox 保持原样——用户感知远低于想象
真正麻烦的不是写不对伪元素，而是忘了 Firefox 完全不认它们；等 QA 提 bug 才发现，已经返工两轮。
