Firefox 不支持自定义 input[type="range"] 样式，仅 WebKit 浏览器可通过 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track 配合 appearance: none 实现定制，且伪元素样式必须显式声明。
改不了 Firefox 的 input[type="range"] 样式——不是你 CSS 写得不对，是它压根不支持。Chrome/Safari/Edge 能调，但必须走 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track 这两条路，且 appearance: none 是死线，漏了就全白搭。
为什么直接写 .form-range { background: red } 没用
因为浏览器把轨道（track）和滑块（thumb）藏在伪元素里，不是普通 DOM 节点。你写的样式只作用在 input 元素本身，而它默认是透明、无宽高的“壳”。真正渲染视觉的那两部分，必须显式命中伪类才能控制。
-
.form-range本身只能设外边距、字体、宽度等容器级属性 -
background、border、height对整个 input 无效——轨道高度得靠::-webkit-slider-runnable-track单独设 - 没加
appearance: none时，所有width/height/border-radius都被忽略，浏览器照常画原生小圆点
::-webkit-slider-thumb 必须带 appearance: none
这是所有 WebKit 浏览器（Chrome、Safari、Edge）的硬性前提。它不是可选项，而是开关——关了它，后续样式全被屏蔽。
- 必须在同一规则里写：
.form-range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; }，拆成两条规则会失效 - 加完立刻设
background-color，否则 thumb 透明不可见 - 别用
margin微调位置，各浏览器行为不一致；改用transform: translateY(-50%)做垂直居中更稳 - Firefox 完全无视这个伪类，且官方文档至今（2026 年）仍明确写着 “no support for custom styling”
::-webkit-slider-runnable-track 控制的是可拖区域，不是“背景条”
很多人误以为它是轨道背景，其实它是 thumb 实际能滑动的底层区域。它的 background 设的是整个轨道底色，已滑动部分（progress）得靠渐变模拟，不能靠 JS 动态改 background-position。
- 设高度必须在这里：
.form-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; } - 填充色（已滑动部分）用线性渐变：
background: linear-gradient(to right, #007bff, #007bff) no-repeat;，再配合background-size动态控制长度（需 JS 配合） - Firefox 不支持该渐变方案，
accent-color是它唯一可控的主色，但只影响 thumb 和 track 灰阶深浅，无法实现双色填充 - Safari 15.4+ 才支持
appearance: none在 thumb 上，旧版只能妥协
Firefox 下的真实选择只有两个
没有中间路线。要么接受它永远显示原生灰阶滑块，要么放弃原生 input[type="range"]，用 JS 模拟。
- 推荐第一种：加个注释说明即可，省事、无障碍友好、无额外 bundle 体积
- 若必须统一外观，BootstrapBlazor 的
<Slider>或自研 div-based 滑块是可行路径，但它本质是<div>+<input class="form-range" hidden>组合，键盘导航、aria-valuenow、焦点管理都得手写补全 - 别试
::-moz-range-thumb—— Firefox 自 2019 年起就废弃这些伪类，当前版本（2026）仍无替代
最易被忽略的点：所有 WebKit 伪类必须带 ::-webkit- 前缀，写成 ::slider-thumb 或 ::-moz-slider-thumb 都不会生效；而 Firefox 的沉默不是 bug，是明确的设计取舍——它宁可保持一致性，也不开放样式接口。
