如何去除HTML5 video/audio标签控制栏外侧的背景色？

使用webkit前缀CSS隐藏audio标签的大部分控制项，仅保留音量控制条时，控制栏剩余区域出现多余背景色，修改background-color、background-image等常规属性无效。

之前的CSS仅修改了被隐藏的子控件属性，没有命中控制栏的外层容器（即::-webkit-media-controls和::-webkit-media-controls-panel两个WebKit私有伪元素），因此背景设置不生效；同时隐藏子控件后，控件容器仍保留默认宽度，导致多余区域露出背景。

在原有CSS基础上补充以下规则即可：

/* 给audio元素本身设置透明背景，消除默认背景 */
#cmusic {
  background-color: transparent;
}

/* 控制栏外层容器宽度自适应内容，消除多余空白区域 */
#cmusic::-webkit-media-controls {
  width: fit-content;
}

/* 控制栏面板设置透明背景，加!important覆盖浏览器默认样式 */
#cmusic::-webkit-media-controls-panel {
  background-color: transparent !important;
  background-image: none !important;
  /* 如果有残留阴影可补充下面这条规则 */
  /* box-shadow: none !important; */
}

/* 原有隐藏控件的规则，补充缺失的闭合括号 */
#cmusic::-webkit-media-controls-timeline,
#cmusic::-webkit-media-controls-play-button,
#cmusic::-webkit-media-controls-current-time-display,
#cmusic::-webkit-media-controls-time-remaining-display {
  display: none;
}

原有HTML代码可保持不变：

<audio id="cmusic" src="http://tw.yisell.com/search_pop.htm?yn=p202900550539464_88012&ym=pa&id=WiHrLDpmwvQ=&yc=21&yt=xPIEJJmxLnS27HbpKOINaq2QBg==" autoplay="true" loop controls='controls' controlsList='nodownload' style="float: left;"></audio>

上述方案仅适配WebKit内核浏览器（Chrome、Edge、Safari等），非WebKit内核浏览器不支持该系列私有前缀，如需全兼容建议自行实现自定义控制条。

内容的提问来源于stack exchange，提问作者Wade Lin