如何移除HTML <video>元素时间线控件周围的深色区域？

你尝试的video::-webkit-media-controls-enclosure和video::-webkit-media-controls-panel确实不是控制这个深色区域的元素，真正需要调整的是**video::-webkit-media-controls-background**这个伪元素，它负责控件的背景叠加层。

具体操作方案 #

• 完全移除深色背景：

video::-webkit-media-controls-background {
  background-color: transparent !important;
}

• 修改为自定义颜色：

video::-webkit-media-controls-background {
  background-color: #ffffff !important; /* 替换成你想要的颜色 */
}

如果控件边缘还有半透明渐变效果，可以同时调整video::-webkit-media-controls-panel的阴影属性：

video::-webkit-media-controls-panel {
  box-shadow: none !important;
}

需要注意的是，WebKit私有伪元素的命名可能随Chrome版本更新变化，要是后续样式失效，直接用浏览器开发者工具（F12）选中控件区域，查看对应伪元素选择器再调整即可。

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