html5媒体播放器进度条可通过css重写实现品牌化设计，需重置range默认样式、用伪元素定制轨道与滑块、js动态控制已播放高亮，并兼顾交互反馈与无障碍支持。
HTML5 媒体播放器的进度条默认样式简陋、缺乏品牌感，但通过 CSS 可以完全重写其外观，实现与整体 UI 风格统一的视觉效果。关键在于精准控制 <input type="range">（即 <video></video> 或 <audio></audio> 的 progress 控件）的伪元素和状态样式。
覆盖原生 range 输入框的默认样式
浏览器对 input[type="range"] 的渲染差异大，需重置所有基础样式再重建。重点是隐藏原生滑块轨道和滑块本身，用自定义元素替代：
- 用
appearance: none清除各浏览器默认外观（注意加 WebKit、Moz 等前缀） - 设置
background: transparent和border: none消除残留边框与背景 - 宽度设为 100%，高度按设计需求设定（如 6px），用于后续伪元素绘制
自定义轨道（track）与滑块（thumb）
CSS 通过伪元素分别控制轨道和滑块。不同浏览器使用不同选择器，需全部覆盖：
-
WebKit（Chrome/Safari）：用
::-webkit-slider-runnable-track绘制轨道，::-webkit-slider-thumb定义滑块；可设圆角、阴影、渐变背景 -
Firefox：用
::-moz-range-track和::-moz-range-thumb；注意 Firefox 不支持 track 渐变，可用 solid 色+box-shadow 模拟立体感 -
Edge/IE：用
::-ms-track和::-ms-thumb；IE10+ 支持，但不支持圆角滑块，建议统一用圆形border-radius: 50%
实现播放进度高亮（已播放部分）
原生 range 无法直接区分“已播放”与“未播放”段，需结合 JavaScript 动态更新一个叠加层：
- 在 range 外层包裹一个
<div class="progress-container"><li>内部添加两个 <code><div>：一个作为背景轨道（灰色），另一个作为进度条（蓝色），宽度由 JS 实时设为 <code>video.currentTime / video.duration * 100 + '%' - 将 range 设置为透明且
pointer-events: none，确保点击仍能触发原生行为，同时视觉上由自定义层主导 - 滑块 hover/focus 时放大或加阴影，active 状态下改变颜色，提升操作确认感
- 为 range 添加
aria-label="播放进度"和aria-valuenow/aria-valuemin/aria-valuemax属性，供读屏软件识别 - 避免纯色对比度不足（如浅灰文字配白底），参考 WCAG AA 标准，确保文本与背景对比度 ≥ 4.5:1
增强交互反馈与可访问性
美化不能牺牲可用性。需补充状态反馈与无障碍支持：
不复杂但容易忽略细节，比如 Firefox 下 track 高度需配合 thumb 高度调整才能居中，或移动端 touch 区域太小导致拖动困难——这些都需要在真实设备上反复测试。
