Пользовательский CSS для тега <audio>?

Ответ 1

В настоящее время нет способа подгонять игроков HTML5 <audio>, используя CSS. Вместо этого вы можете оставить атрибут control и реализовать свои собственные элементы управления с помощью Javascript. Если вы не хотите их реализовать самостоятельно, я бы рекомендовал использовать существующий текстовый аудиоплеер HTML5, например jPlayer.

Ответ 2

Я обнаружил совершенно случайно (я работал с изображениями в то время), что ящик-тень, пограничный радиус и переходы отлично работают с проигрывателем аудио-тегов с болотными стандартами. У меня это работает в Chrome, FF и Opera.

audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

с: -

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow:  2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}

Я даю вам это только "немного подвешивает", но это делает их более интересными, чем то, что уже существует, и не делает MAJOR fannying в JS.

НЕ доступен в IE, к сожалению (еще не поддерживающий переходный бит), но он, кажется, ухудшается красиво.

Ответ 3

Существуют те же самые параметры CSS для аудио тегов.

Нравится: html 5 ширина аудио-тегов

Но если вы поиграете с ним, вы увидите, что результаты могут быть неожиданными - с августа 2012 года.

Ответ 4

Помимо опций box-shadow, transform и border, упомянутых в других ответах, браузеры WebKit в настоящее время также подчиняются -webkit-text-fill-color, чтобы установить цвет номеров с истекшим временем, но поскольку нет способа установите их фон (которые могут отличаться от платформы, например, инвертированные высококонтрастные режимы в некоторых операционных системах), вам рекомендуется установить значение -webkit-text-fill-color в значение "initial", если вы использовали его в другом месте и звуковой элемент наследует это, в противном случае некоторые пользователи могут найти эти числа нечитаемыми.