必须先写 appearance: none 才能自定义 .form-range，否则后续样式无效；WebKit 浏览器需用 ::-webkit-slider-thumb/runnable-track 且 appearance 必须同规则；Firefox 不支持任何 CSS 自定义，只能接受原生外观或改用 JS 模拟组件。
直接给 .form-range 写 background 或 border 没用，因为轨道（track）和滑块（thumb）由浏览器伪元素控制，不显式命中就改不动。
必须先写 appearance: none
这是所有自定义的前提，漏掉这一步，后续所有样式都会被忽略。WebKit 浏览器（Chrome/Safari/Edge）只认 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track，但它们生效的硬性条件是：同一规则里必须带 appearance: none。
-
.form-range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: #0d6efd; }—— 正确，appearance和尺寸/颜色在同一条规则里 -
.form-range::-webkit-slider-thumb { appearance: none; } .form-range::-webkit-slider-thumb { width: 20px; }—— 错误，拆开后第二条会被忽略 - 不加
background-color会导致 thumb 透明不可见，哪怕设置了width和height - Firefox 完全无视
appearance: none及所有 WebKit 伪元素，目前（2026 年）仍无任何 CSS 方式可定制其外观
轨道样式要分引擎写，不能共用一套规则
::-webkit-slider-runnable-track 控制 Chrome/Safari/Edge 的轨道，::-moz-range-track 控制 Firefox 的轨道，二者语法、支持能力完全不同。
- Chrome 支持
background: linear-gradient(to right, #0d6efd, #0d6efd)实现“已滑过”部分着色；Firefox 只接受background-color，不支持渐变或图片 - 高度统一用
height控制，但 Firefox 的::-moz-range-track对border-radius支持不稳定，建议只设height和纯色背景 - 别指望
!important能绕过 Bootstrap 默认重置 —— 它内部已用了appearance: none和大量覆盖，你的选择器权重必须更高，比如用.my-slider.form-range::-webkit-slider-runnable-track
移动端和 Firefox 的现实处理方式
移动端 Safari 对 transform 和 touch-action 敏感，Firefox 则根本无法定制，这两点决定了你得做取舍。
- 移动端 thumb 建议加
touch-action: manipulation到父容器，避免拖动时触发页面滚动 - thumb 垂直居中别用
margin-top，行为跨浏览器不一致；改用transform: translateY(-50%)更稳 - Firefox 下唯一可行方案是接受原生灰阶外观 —— 不写任何
::-moz-规则，避免干扰默认渲染 - 若业务强依赖统一外观，必须用 JS 模拟组件（如 BootstrapBlazor 的
组合，键盘导航和无障碍需额外补全真正卡住大多数人的不是写法复杂，而是没意识到
appearance: none必须和其它样式写在同一规则里，以及 Firefox 至今（2026 年）仍拒绝任何形式的 CSS 自定义 —— 这两点不提前确认，调试半天也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
