直接改 background 没用是因为 input[type="range"] 的轨道由浏览器伪元素渲染且被 Bootstrap 高优先级样式覆盖；需用 input.form-range::-webkit-slider-runnable-track 和 input.form-range::-moz-range-track 分别设置 background 并加 !important，同时清除边框。
为什么直接改 background 没用？
Bootstrap 5 的 <input type="range"> 默认样式由浏览器原生控制，其轨道（track）实际是伪元素 ::webkit-slider-runnable-track（Chrome/Safari）或 ::moz-range-track（Firefox）渲染的。直接给 input[type="range"] 设置 background 不生效，因为原生 track 被包裹在 shadow DOM 内部，且被 Bootstrap 的默认 CSS 覆盖。
覆盖 WebKit 浏览器（Chrome、Edge、Safari）的轨道颜色
需通过伪元素精准定位并重置默认样式。关键点：必须加 !important（Bootstrap 5 的 form-range 类带高优先级规则），且要清除原有背景和边框：
- 用
input.form-range::-webkit-slider-runnable-track选择器 - 设置
background: #0d6efd !important;（替换成你想要的颜色） - 务必同时设
border: none !important;，否则默认灰色边框会遮挡新颜色 - 若需圆角，加
border-radius: 1rem !important;（与 Bootstrap 的form-range保持一致）
input.form-range::-webkit-slider-runnable-track {
background: #dc3545 !important;
border: none !important;
border-radius: 1rem !important;
}
兼容 Firefox：别漏掉 ::moz-range-track
Firefox 不识别 WebKit 伪元素，必须单独写。它不支持 border-radius 在 track 上生效（仅 thumb 支持），所以圆角可忽略，但背景色必须显式设置：
- 选择器用
input.form-range::-moz-range-track - 同样需要
background+!important - 不用设
border—— Firefox 的 track 默认无边框
input.form-range::-moz-range-track {
background: #dc3545 !important;
}
IE 和旧版 Edge 已无需处理
Bootstrap 5 官方已放弃对 Internet Explorer 的支持，旧版 Edge（EdgeHTML）也已退役。如果你的项目明确不支持 IE，就不用写 ::ms-fill-lower / ::ms-fill-upper 这类 IE 专属伪元素。强行添加反而可能干扰现代浏览器渲染。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：所有自定义样式必须放在 Bootstrap 的 CSS 之后加载，否则 !important 也压不过它的内置规则；另外，如果用了 Sass 编译，确保这些伪元素规则没被嵌套作用域意外隔离。
