自定義CSS爲<audio>標記？

Question

我正在構建一個音樂播放器Web應用程序，它實現了HTML5音頻標記，但是希望它在跨瀏覽器看起來一致 - 是否可以定義我自己的自定義CSS？如何？

歡呼

費拉

Answer 1

目前還不能以任何方式使用CSS樣式HTML5 <audio>球員。相反，您可以忽略control屬性，並使用Javascript實現您自己的控件。如果你不想自己實現它們，我建議使用現有的HTML5音頻播放器，如jPlayer。

Answer 2

音頻標籤有CSS選項。

像：html 5 audio tag width

但如果你玩它，你會看到結果可能是意想不到的 - 如2012年8月

Answer 3

的我發現純屬偶然（我是用圖像的時候工作），箱形陰影，邊界半徑和過渡與沼氣標準音頻標籤播放器的工作情況相當好。我有這個在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 ; 
} 

我承認這只是「撻它一點」，但它使他們的視線比已經存在更多精彩，並沒有做重大fannying有關JS。

在IE中不可用，不幸的是（尚不支持轉換位），但它似乎很好地降級。

Answer 4

除了其他答案中提到的box-shadow，transform和border選項之外，WebKit瀏覽器目前還服從-webkit-text-fill-color來設置「time elapsed」數字的顏色，但由於沒有辦法要設置它們的背景（可能會隨平臺而變化，例如某些操作系統上的反轉高對比度模式），如果您在別處使用過，建議您將-webkit-text-fill-color設置爲值「initial」並且音頻元素正在繼承此功能，否則某些用戶可能會發現這些數字無法讀取。