Как поменять цвет контролов тега audio?

514
23 декабря 2017, 03:40

Имеется html5 тэг audio. Я в списке 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>

Результат из примера:

Answer 1

То что стрелкой автор отметил можно убрать вот примерно так. Используя css фильтры.

Но поскольку тут везде написан префикс webkit то все это будет работать в хроме и на некоторых браузерах то же, но не на 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>

READ ALSO
Как сделать меню свернутым при загрузке?
CSS

Как сделать меню свернутым при загрузке?

Я сделал адаптивное меню, но при загрузке страницы оно уже развернуто, а нужно, чтобы было свернутымЯ пытался пофиксить это, добавляя к #menu-item...

 267
Ошибка: Truncated incorrect DOUBLE value
MySQL

Ошибка: Truncated incorrect DOUBLE value

При исполнении программа выдаёт ошибку:

 250
Syntax error MySql Workbench
MySQL

Syntax error MySql Workbench

Есть вот такая запись:

 243
Правильный запрос
MySQL

Правильный запрос

Продолжение данной темы! Есть таблица:

 285