chrome/edge需用::-webkit-slider-thumb和::-webkit-slider-runnable-track配合appearance: none重写样式，height必须设在track上，thumb用margin-top垂直居中；firefox须为::track设appearance: none且::thumb需加vertical-align: top；safari对transform支持差，旧版本appearance: none无效。
Chrome / Edge（Blink 内核）下 input[type="range"] 的伪元素控制链
Chrome 和新版 Edge 使用 Blink 内核，其滑块样式由一组特定伪元素分层控制，不是单个 CSS 规则能一揽子覆盖。核心伪元素有三个：::-webkit-slider-thumb（拖拽滑块）、::-webkit-slider-runnable-track（轨道）、::-webkit-slider-before（已滑过部分，仅部分版本支持，且行为不稳定）。必须显式设置 appearance: none 才能解除默认样式锁定，否则自定义几乎无效。
常见错误是只改 ::-webkit-slider-thumb 却忽略 ::-webkit-slider-runnable-track 的 border 或 background，导致轨道残留原生灰边或高度异常。另外，height 必须设在 track 上，thumb 的 width/height 才能生效；若只设 thumb 尺寸，它会缩进轨道里，视觉错位。
实操建议：
-
input[type="range"]元素本身设width和margin，不设height -
::-webkit-slider-runnable-track必须设height、background、border-radius，并加appearance: none -
::-webkit-slider-thumb设appearance: none、width/height、background、border-radius，用margin-top垂直居中（值 ≈ (track-height - thumb-height) / 2） - 避免使用
::-webkit-slider-before做已选区——它在 Chrome 115+ 中已被废弃，渲染不可靠
Firefox（Gecko 内核）的 input[type="range"] 样式重写路径
Firefox 不识别 WebKit 伪元素，只支持标准伪类 ::thumb、::track 和实验性 ::fill（对应已滑过区域），但需启用 layout.css.-moz-appearance.enabled（默认开启）。关键限制是：Firefox 要求必须为 ::track 显式声明 appearance: none，否则 ::thumb 完全不生效——这点和 Blink 不同，容易漏掉。
另一个坑是 ::thumb 在 Firefox 中默认继承 vertical-align: middle，若父容器行高不一致，滑块会浮动偏移；而 ::track 的 height 若设为 em 或 rem，可能因字体缩放被放大，推荐统一用 px。
实操建议：
- 对
input[type="range"]本身设font-size: 16px，避免缩放干扰 -
::track必须含appearance: none+height+background -
::thumb设appearance: none+width/height+border-radius，并加vertical-align: top消除基线对齐干扰 -
::fill可用于已选区着色，但注意它不支持渐变背景，仅纯色有效
Safari（WebKit 内核，非 Blink）的兼容断点与私有属性风险
Safari 使用旧版 WebKit，虽也认 ::-webkit-slider-thumb 等伪元素，但存在两个关键断点：iOS 15.4+ 和 macOS Monterey 12.3+ 之后才完整支持 appearance: none；更早版本即使写了，track 和 thumb 仍会保留部分圆角/阴影。此外，Safari 对 transform 在 ::-webkit-slider-thumb 上的支持极差——比如 scale(1.2) 会导致拖动卡顿甚至失效。
最隐蔽的问题是 Safari 会强制将 input[type="range"] 的 value 属性同步到 style 内联样式中（仅限某些版本），若 JS 动态修改 value，可能触发意外交互抖动。因此不建议在 Safari 中依赖 input 元素本身的 style 控制视觉状态。
实操建议：
- 检测 Safari 版本，对
- thumb 上禁用
transform、filter、box-shadow（阴影在 Safari 中渲染模糊且耗性能） - 用
background-image: linear-gradient()替代多层box-shadow实现立体感 - 所有尺寸用
px，避开rem在 Safari 缩放模式下的计算偏差
跨内核统一方案的取舍边界
没有“一套 CSS 通吃三端”的写法。真正可靠的方案是分层覆盖：先写通用基础样式（如 width、cursor），再用 @supports (-webkit-appearance: none) 包住 Blink/Safari 规则，用 @supports (appearance: none) 包住 Gecko 规则。不要试图用 JavaScript 动态注入样式——input[type="range"] 的伪元素无法通过 JS 获取或操作 DOM 节点。
最容易被忽略的是可访问性退化。自定义 thumb 后，若未同步设置 focus-visible 样式或 outline，键盘用户将无法感知焦点位置；而 Safari 对 :focus-within 在 range 上的支持不一致，必须单独为 input:focus 加 outline。
实操建议：
- 每个内核规则块末尾加
input[type="range"]:focus::-webkit-slider-thumb { outline: 2px solid #007aff; }和对应 Gecko 版本 - 禁用
user-select: none—— 它在 Firefox 中会导致拖动失灵 - 不要给
input设pointer-events: none，否则所有内核都失去交互 - 移动端务必测试真机 touchstart 响应延迟，Safari 下
touch-action: manipulation可缓解但不彻底
