直接写::-webkit-media-controls无效，因其仅为容器且不可样式化；真正可定制的是其子伪元素（如::-webkit-media-controls-play-button），需用!important逐个覆盖，并配合controlsList禁用不可控按钮；最可靠方案是移除controls属性、手写整套控件。
为什么直接写 ::-webkit-media-controls 没效果
因为这个伪元素本身不可直接样式化——它只是个容器壳子，浏览器根本不允许你给它设 display、background 或 padding。你写的样式大概率被忽略，连 DevTools 里都看不到生效。真正能动的是它内部的子控件，比如播放按钮、进度条轨道、音量滑块等。
更关键的是：这个伪类只在 Chromium 系列（Chrome、Edge、新版 Opera）里存在，Firefox 和 Safari 完全不识别，所以纯靠它做“跨浏览器美化”注定失败。
::-webkit-media-controls-play-button 等子控件怎么改才真生效
必须用 !important 覆盖浏览器默认样式，且要逐个命中具体子伪元素。常见可操作的有：
-
::-webkit-media-controls-play-button：替换为自定义 SVG 或背景图，注意设opacity: 0隐藏原生图标，再用::before插入新内容 -
::-webkit-media-controls-timeline和::-webkit-media-controls-timeline-container：控制进度条整体宽度和位置，但无法改拖拽手柄（那是::-webkit-media-controls-timeline-thumb） -
::-webkit-media-controls-volume-slider：音量滑块可用，但::-webkit-media-controls-mute-button的图标替换需配合appearance: none+background
示例：隐藏原生播放按钮并插入 SVG
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
video::-webkit-media-controls-play-button {
opacity: 0 !important;
}
video::-webkit-media-controls-play-button::before {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M8 5v14l11-7z'/></svg>");
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
用 controlsList 属性提前关掉不想被样式化的控件
有些控件（比如下载按钮、全屏按钮）根本没法用 CSS 覆盖，强行覆盖反而容易破坏布局。不如从源头禁用：
-
controlsList="nodownload"：移除下载按钮（避免用户右键另存为） -
controlsList="nofullscreen"：隐藏全屏按钮（注意：不影响 JS 调用requestFullscreen()） -
controlsList="noremoteplayback"：禁用投屏按钮（Chromecast / AirPlay 图标）
这些属性在 Chrome 78+、Edge 79+ 支持，Firefox 不支持但会忽略，属于安全降级。加了之后，CSS 就不用白费力气去隐藏那些按钮了。
真正可靠的方案：自己造控件，用 controls 属性禁用原生控件
所有基于 ::-webkit-media-controls 的折腾，本质都是在浏览器留下的缝隙里塞补丁。一旦 Chrome 升级、或用户开硬件加速，样式就可能错位甚至失效。最稳的做法是：
- 给
<video>去掉controls属性 - 用 HTML + CSS 写一套按钮、进度条、音量条（绑定
currentTime、volume、play()/pause()） - 用
video.addEventListener('timeupdate', ...)同步进度条位置 - 对触摸设备额外处理
touchstart/touchmove防止误触发
这样写的控件完全可控，还能加 tooltip、键盘焦点管理、深色模式适配——而所有这些，在原生控件上要么做不到，要么得靠一堆 hack。
别指望用几个伪类就搞定整个播放器的视觉统一；浏览器原生控件的设计目标从来不是“可定制”，而是“可靠”。想好看，就得亲手搭。
