如何用CSS访问Chrome音量滑块？识别并隐藏指定HTML5视频控件

控件名称确认 #

你红色框中标注的确实是Chrome默认HTML5视频控件的音量滑块，它属于video内置控件组的一部分，默认会在鼠标悬停到静音按钮区域时展开显示。

CSS操作方法 #

Chrome的默认视频控件基于Shadow DOM实现，需要使用webkit内核特有的CSS选择器来访问：

• 隐藏整个音量控件（包含静音按钮和滑块）：

video::-webkit-media-controls-volume-slider-container,
video::-webkit-media-controls-volume-slider {
  display: none !important;
}

• 仅隐藏音量滑块，保留静音按钮：

video::-webkit-media-controls-volume-slider {
  display: none !important;
}

• 自定义音量滑块样式（示例）：

video::-webkit-media-controls-volume-slider {
  background-color: #ddd;
  height: 3px;
  border-radius: 2px;
}

注意：以上选择器仅适用于Chrome等webkit内核浏览器，其他浏览器的默认视频控件选择器会有所不同。

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