直接给.form-range设background无效，因轨道由伪元素渲染且Bootstrap高优先级样式锁定；WebKit需appearance:none!important+::-webkit-slider-runnable-track重写，Firefox需单独处理::-moz-range-track且不支持圆角。
为什么直接给 .form-range 设置 background 没用？
因为浏览器把轨道（track）藏在伪元素里，.form-range 本身只是容器，不渲染视觉轨道。Bootstrap 的默认样式又通过高优先级规则锁定了原生行为，你写的 background 被完全忽略。所有“改了但没变”的情况，基本都卡在这一步。
WebKit 浏览器（Chrome/Edge/Safari）必须加 appearance: none 并用 !important
只有先禁用原生样式，才能接管伪元素。而且 Bootstrap 的 CSS 优先级很高，不加 !important 很可能被覆盖：
-
input.form-range::-webkit-slider-runnable-track是目标选择器，不是.form-range::-webkit-slider-runnable-track - 必须写
appearance: none !important;—— 这是前提，漏掉就全白搭 - 紧跟着设
background: #2196F3 !important;和border: none !important;，否则默认灰边会盖住新颜色 - 圆角可用
border-radius: 4px !important;，但别设太高（如1rem），容易和 thumb 错位
Firefox 必须单独处理 ::-moz-range-track，且不支持圆角
Firefox 完全无视 WebKit 伪元素，也不支持 border-radius 在 track 上生效。它只认自己的伪类，且逻辑更简单：
- 选择器只能是
input.form-range::-moz-range-track，不能省略input - 只需
background: #2196F3 !important;，不用管border或border-radius - 别试图用
transform或margin调整它的位置——Firefox 对这些属性的支持不稳定，极易导致 thumb 偏移
别指望垂直居中或深色模式自动适配
滑块 thumb 的垂直对齐、深色模式下的颜色响应，都不会自动继承。常见翻车点：
- thumb 垂直居中建议用
transform: translateY(-50%)，比top: 50%或margin-top更可靠 - 深色模式下，
--bs-primary这类 CSS 变量不会影响 track 颜色，必须手动在[data-bs-theme="dark"]下重写伪元素样式 - 用
rgba()或透明色值（如rgba(33, 150, 243, 0.8)）会导致 Firefox 下颜色发灰，推荐用不透明十六进制值
真正容易被忽略的是：Firefox 的 track 样式一旦写错选择器或漏 !important，就彻底回退到不可控的灰阶；而 WebKit 下哪怕只漏一个 appearance: none，后续所有样式都会失效——这两处是 90% 的失败源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
