juktastockCSS CSS  Customize background style HTML5 audio player

stock: Selectors Colour Bubble

Метод invert

Метод основывается на свойстве invert, относительно поддерживаемым браузерами.

Элемент HTML5 audio по разному отображается в браузерах, наша задача подогнать фон проигрывателя под фон родителя. Для гарантированного решения сузим задачу до 2 вариантов: светлый и тёмный фон. Инструменты - только CSS, код проигрывателя не изменяем. Находим родителя (в идеале body) и назначаем ему класс в зависимости от фона .light или .dark. Есть решение только под Webkit. Далее примеры и код.

Code

В Мозилле элемент имеет тёмный фон, потому делаем invert только для светлого фона.

@-moz-document url-prefix() {
  .light audio {
    -webkit-filter:invert(100%);
    filter:invert(100%);
  }
}

ещё вариант:

@-moz-document url-prefix() {
  .light audio {
    mix-blend-mode: difference;
  }
}

В браузерах на Webkit элемент имеет светлый фон, потому делаем invert только для тёмного фона.

Так, как мы легко добираемся до #shadow-root элементов, то скрываем фон проигрывателя совсем: *::-webkit-media-controls-enclosure

.light *::-webkit-media-controls,
.light *::-webkit-media-text-track-container,
.dark *::-webkit-media-controls,
.dark *::-webkit-media-text-track-container {
  background-color:transparent;
}
*::-webkit-media-controls-enclosure {
  background-color:transparent;
}
.dark *::-webkit-media-controls-enclosure {
  -webkit-filter:invert(1);
  filter:invert(1);
}

С IE пока справиться не удалось

audio {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(Invert=1)"; /* no working */
  -ms-filter: invert(100%); /* no working */
  -ms-filter: invert(1); /* no working */
}

Совместимость Firefox Chrome Safari Opera