必须同时写全三套伪元素规则：::-webkit-slider-thumb（WebKit）、::-moz-range-thumb（Gecko）、::thumb（实验性标准），缺一不可；appearance: none 必须与伪元素样式同条规则声明；进度填充应使用绝对定位 div 模拟而非 background-position。
必须写全三套伪元素规则，缺一不可
只写 ::-webkit-slider-thumb，Firefox 下完全无效；只写 ::-moz-range-thumb，Chrome 和 Safari 就不认。这不是“选一个主流浏览器适配就行”的问题——现代项目里用户真实分布决定了你得同时覆盖 WebKit、Gecko 和实验性标准三套引擎。
实操建议：
-
appearance: none必须出现在每条规则里，不能只写在input[type="range"]上；否则 Firefox 会忽略后续样式 - 顺序按实际覆盖率排：先写 WebKit（Chrome/Edge/Safari 大部分版本），再写 Mozilla（Firefox），最后加实验性标准
::thumb和::track（仅 Safari 15.4+ 有限支持） - 别用
::slider-thumb这类简写，所有浏览器都不识别，写了等于白写 - 移动端 Safari 对
::-webkit-slider-thumb的border-radius支持不稳定，某些 16.x 版本下会失效或偏移，建议加transform: translateZ(0)强制硬件加速来规避
appearance: none 是生效前提，但 Firefox 行为特殊
很多人加了 appearance: none 还是改不动 thumb，问题出在 Firefox 的实现逻辑上：它要求这个声明必须和伪元素样式写在同一条 CSS 规则里，比如 input[type="range"]::-moz-range-thumb { appearance: none; background: #007bff; }。如果拆成两条规则，第二条的背景色就无效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- Chrome 下 thumb 尺寸正常，Firefox 下还是小灰点 → 漏了
appearance: none或没和样式同规则 - 设了
width和height，但 Firefox 下 thumb 没变大 →appearance: none缺失或位置错误 - 轨道背景在 Chrome 可见，Firefox 下空白 →
::-moz-range-track不支持渐变，只能用纯色 fallback
input 事件监听比 change 更可靠，但移动端要防丢帧
样式只是表层，交互逻辑错一点，整个滑块就“看起来能动，实际不响应”。最常踩的坑不是写错伪元素，而是事件绑定方式不对。
实操建议：
- 用
input事件，不是change—— 后者只在松手后触发一次，拖动过程无反馈 -
input.value永远是字符串，不做Number(input.value)转换，后续做数学运算会拼接，比如"20" + 1 === "201" - iOS Safari 快速拖动时可能丢帧，加
touch-action: none到input[type="range"]上可避免滚动冲突 - 没设
min/max属性时，value默认是"50"，不是"0"，也不是空字符串
进度填充不能靠伪元素 background-position
想让轨道左侧随滑块位置变色（比如音量条），别试图用 background: linear-gradient() 配合 background-position 动态调整——各浏览器对伪元素中该属性的解析差异极大，thumb 居中时填充起点经常偏移 2–3px，视觉上明显错位。
更可靠的做法：
- 用一个绝对定位的
<div>盖在轨道上方，作为“假填充层” - 监听
input事件，计算当前值占范围的百分比：(value - min) / (max - min) - 动态设置该
<div>的width，例如style.width = percent + '%' - 注意：该
<div>的高度、圆角、背景色需与轨道一致，否则边缘露馅
真正麻烦的不是写多少行 CSS，而是每套伪元素背后都有独立的渲染规则和边界条件。比如 Firefox 不支持 ::-moz-range-track 的圆角，Safari 某些版本下 ::-webkit-slider-thumb 的 transform 会失效，这些细节不验证到真机，光看文档永远踩坑。
