主页 / 问题 / 761012
Accepted
ilyaplot
Asked:2020-12-20 21:23:45 +0000 UTC2020-12-20 21:23:45 +0000 UTC

如何更改音频标签控件的颜色？

  • 772

有一个 html5 音频标签。我在 webkit 列表中找到了如何更改延时摄影的颜色，但没有找到如何更改控件的颜色。告诉我，您需要为哪个属性指定颜色？ 在此处输入图像描述

UPD：例如，我从@Arsen指出的列表中取出所有参数我感兴趣的控件的颜色没有改变

audio::-webkit-media-controls-panel,
			audio::-webkit-media-controls-mute-button,
			audio::-webkit-media-controls-play-button,
			audio::-webkit-media-controls-timeline-container,
			audio::-webkit-media-controls-current-time-display,
			audio::-webkit-media-controls-time-remaining-display,
			audio::-webkit-media-controls-timeline,
			audio::-webkit-media-controls-volume-slider-container,
			audio::-webkit-media-controls-volume-slider,
			audio::-webkit-media-controls-seek-back-button,
			audio::-webkit-media-controls-seek-forward-button,
			audio::-webkit-media-controls-fullscreen-button,
			audio::-webkit-media-controls-rewind-button,
			audio::-webkit-media-controls-return-to-realtime-button,
			audio::-webkit-media-controls-toggle-closed-captions-button {
				background: yellow;
				color: yellow;
	
			}
<audio src="https://www.w3schools.com/html/horse.ogg" controls>

示例结果：

在此处输入图像描述

css

1 个回答

  1. Best Answer

    作者用箭头标注的可以这样去掉。通过使用css 过滤器。

    但是由于这里到处都写了前缀，webkit所有这些都可以在 chrome 和某些浏览器上运行，但在mozilla firefox.

    audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-current-time-display {
  color: yellow;
  background: yellow
}
audio::-webkit-media-controls-volume-slider {
    -webkit-filter: hue-rotate(195deg) saturate(100);
}
audio::-webkit-media-controls-timeline {
    -webkit-filter: hue-rotate(195deg) saturate(100);
}
    <audio src="https://www.w3schools.com/html/horse.ogg" controls>

    • 5

相关问题