iOS Safari不支持audio元素的appearance: none，需用伪元素隐藏、CSS覆盖或Audio API自定义实现；为防闪跳，样式须置于head且初始HTML带定制class。
audio 元素在移动端为什么总带奇怪边框和按钮
因为 Safari 和 Chrome for iOS 对 <audio> 的 UA 样式处理完全不同：Safari 默认渲染成带圆角、内阴影、右侧播放/暂停按钮的控件；Chrome for iOS 则倾向显示为细长矩形，且部分版本会把下载图标塞进右上角。更麻烦的是，appearance: none 在 iOS Safari 中对 <audio> 完全无效——它只对 <input> 和 <select> 生效。
直接写 appearance: none 不起作用怎么办
别硬刚。iOS Safari 不支持对 <audio> 应用 appearance: none，强行加只会让样式表里多一行无用声明。真正能控制外观的只有三类手段：
- 用
width/height+background覆盖整个控件区域，再用伪元素或子元素模拟播放器 UI - 隐藏原生控件：
audio::-webkit-media-controls { display: none; }（仅限 WebKit） - 彻底放弃
<audio>原生 UI，改用<button>+Audio()API 手动控制（推荐用于需要高度定制的场景）
如何让自定义 audio 播放器在 iOS 上不闪跳
关键不是“怎么覆盖”，而是“什么时候覆盖”。iOS Safari 加载音频控件有延迟，若 CSS 还没就绪，用户会先看到原生样式，再被替换成你的 UI，造成视觉闪跳。必须做到：
- 把自定义样式规则放在
<head>中，且确保早于任何 JS 初始化逻辑 - 避免用 JS 动态添加 class 触发样式切换；改用初始 HTML 就带好
class="audio-player--custom" - 对
audio::-webkit-media-controls-panel等伪元素设opacity: 0+pointer-events: none，而不是display: none，防止布局重排
要不要保留原生 controls 属性
如果项目只要求基础功能（播放/暂停/进度条），且兼容性底线是 iOS 15+，可以保留 controls 属性并只做轻量美化。但注意两点：
立即学习“前端免费学习笔记（深入）”；
-
controlslist="nodownload noremoteplayback"能禁用部分原生按钮，但它在 Android Chrome 上基本无效 - 所有通过
::-webkit-media-controls系列伪类做的修改，都只在 Safari 和基于 WebKit 的浏览器中生效，Android WebView 或 Firefox Mobile 完全不认
跨平台一致性越强，越得放弃原生控件。真要统一，就得自己画进度条、监听 timeupdate、手动同步 currentTime —— 这些细节，比 appearance 设置难得多，也容易被忽略。
