web-dev-qa-db-ja.com

<audio>タグのカスタムCSS？

HTML5オーディオタグを実装する音楽プレーヤーのWebアプリケーションを構築していますが、ブラウザー間で一貫した外観にしたいのですが、独自のカスタムCSSを定義できますか？そしてどうやって？

乾杯

フェラ

cssaudiohtml5html5-audio
22
Fela Maslen

現在、HTML5のスタイルを設定する方法はありません<audio> CSSを使用するプレーヤー。代わりに、control属性を省略し、Javascriptを使用して独自のコントロールを実装できます。それらをすべて自分で実装したくない場合は、 jPlayer などの既存のテーマ対応HTML5オーディオプレーヤーを使用することをお勧めします。

27
Brian Campbell

私は偶然に（当時画像を扱っていた）箱の影、境界線の半径、トランジションが沼地の標準的なオーディオタグプレーヤーで非常にうまく機能することを発見しました。これは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 ;
}

私はあなたにそれを「少し口を開く」だけですが、それは彼らを既にそこにあるものよりも刺激的で、JSで大騒ぎすることなく視覚的にします。

残念ながらIEでは利用できません（まだ移行ビットをサポートしていません）が、うまく劣化しているようです。

18
Spike

他の回答に記載されているボックスシャドウ、変換、境界線オプションに加えて、WebKitブラウザーは現在-webkit-text-fill-colorに従って「経過時間」の数値の色を設定しますが、背景を設定する方法がないため（プラットフォームによって異なる場合があります。たとえば、一部のオペレーティングシステムではハイコントラストモードが反転します）、-webkit-text-fill-colorを他の場所で使用し、オーディオ要素を使用している場合は、値を「initial」に設定することをお勧めしますそうしないと、一部のユーザーがこれらの数字を読み取れない可能性があります。

1
Silas S. Brown

オーディオタグにはCSSオプションがあります。

いいね： html 5オーディオタグ幅

しかし、それをいじると、予想外の結果になることがあります-2012年8月現在。

0
geektard