Changer la couleur de la balise audio

Résolu
chabinot Messages postés 391 Statut Membre -  
chabinot Messages postés 391 Statut Membre -
Bonjour,
Dans une page html, j'ai une balise audio comme suit: 
<div class="audio">
     <audio src="audio/rosesblanches.mp3" controls></audio>
     <p>Les roses blanches de Berthe Sylva</p>
</div><!-- /.audio -->

dans le même temps, j'ai la feuille de style: 
body {
   font-family: 'Tahoma', sans-serif;
   font-size: 16px;
}
.audio {
   position: relative;
   margin: 0 auto;
   width: 460px;
   height: 80px;
   border: 1px solid #000;
   background-color: transparent;
   border-radius: 8px
}
.audio audio {
   width: 400px;
   height: 32px;
   padding-top: 15px;
   margin-left: 30px;
}
.audio p {
   position: absolute;
   width: 458px;
   left: 20%;
   bottom: -10px;
   font-style: italic;
   color: #fff;
}
.audio p:before {
   content: '♬ ';
}

Le résultat sur la page est :

Comment puis-je changer le fonds de la balise audio ?

Cordialement,

5 réponses

  1.
    jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonjour,
    En en changeant le background color ? 
     background-color: transparent;

    0
    1. chabinot Messages postés 391 Statut Membre 16
       
      Bonjour,
      Cela ne marche pas. Ce que je veux est de pouvoir changer seulement le background de la balise audio. 
      audio {
   background-color: red;
}

      J'ai essayer, mais en vain, on devrait pourtant le faire ??
      0
  2. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Je ne comprend pas... qu'as tu écris exactement ?
    C'est bien dans le css existant que tu as apporté ta modification ?
    Tu as bien pensé à vider le cache de ton navigateur ensuite ?

    Par ce que : 
      body {
   font-family: 'Tahoma', sans-serif;
   font-size: 16px;
}
.audio {
   position: relative;
   margin: 0 auto;
   width: 460px;
   height: 80px;
   border: 1px solid #000;
   background-color: red;
   border-radius: 8px
}




    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Et si c'est juste le lecteur : 
      .audio audio {
   width: 400px;
   height: 32px;
   margin-left: 30px;
  margin-top: 15px;
   background-color: red;
}
      0
    2. chabinot Messages postés 391 Statut Membre 16
       
      Comment as-tu obtenu ce résultat,?
      C'est exactement ce que je veux.
      Arrière plan -> rouge
      Premier plan -> noir
      0
  3. chabinot Messages postés 391 Statut Membre 16
     
    Ce n'est pas exactement cela. Je l'ai déjà essayé.
    J'aimerais avoir la même chose que tu as fais (cf: ton image).
    0
    2. chabinot Messages postés 391 Statut Membre 16
       
      Curieusement, lorsque j'affiche le résultat sur Microsoft Edge, le résultat est impeccable.
      Pourquoi la balise audio est différente d'un navigateur à l'autre ?
      0
  4. chabinot Messages postés 391 Statut Membre 16
     
    Jordane,
    Je te mets le résultat sur Edge.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. chabinot Messages postés 391 Statut Membre 16
     
    Bonjour à tous,
    J'ai procédé autrement. J'ai pris le plugin audio.js qui me convient.
    Ce sujet est résolu.

    Cordialement,
    0

Discussions similaires

html5: Video not properly encoded
Romain -
Marou81 -

3 réponses
Realtek HD Audio Universal Service consomme trop
UnInternauteEndetresse -
UnInternauteEndetresse -

3 réponses