CSS personalizado para a etiqueta?
estou a construir uma aplicação web de leitor de música que implementa a tag de áudio HTML5, no entanto gostaria que parecesse consistente entre os navegadores-é possível definir o meu próprio CSS personalizado? E como?
Saúde.Fela
4 answers
De momento não existe nenhuma maneira de estilo HTML5 {[[0]} jogadores usando CSS. Em vez disso, você pode deixar de fora o atributo control, e implementar seus próprios controles usando Javascript. Se você não quiser implementá-los todos por conta própria, eu recomendaria a utilização de um leitor de áudio HTML5 já existente, como jPlayer.
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);
}
Com: -
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 ;
}
Não disponível em IE, infelizmente (ainda não a parte da transição), mas parece degradar-se bem.
Além disso, o box-shadow, de transformação e de fronteira opções mencionadas em outras respostas, navegadores WebKit, atualmente, também obedecer -webkit-text-fill-color para definir a cor do "tempo decorrido" números, mas como não há nenhuma maneira para definir o seu plano de fundo (que pode variar de acordo com a plataforma, e.g. invertido modos de alto contraste em alguns sistemas operacionais), você teria aconselhado para definir -webkit-text-fill-color para o valor "inicial", caso você tenha usado em outro lugar e o elemento de áudio é herdar esse, caso contrário, alguns usuários podem achar esses números ilegíveis.
Existem opções CSS para a marca de áudio.
Mas se você brincar com ele, verá que os resultados podem ser inesperados - a partir de agosto de 2012.