Sujet Précédent Sujet Suivant

Changer la couleur de la balise audio

Résolu/Fermé
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 - 17 mars 2018 à 14:14
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 - 19 mars 2018 à 09:48
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,
A voir également:

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 mars 2018 à 15:00
Bonjour,
En en changeant le background color ? 
 background-color: transparent;

0
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
17 mars 2018 à 15:06
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
Réponse 2 / 5
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié le 17 mars 2018 à 15:12
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 mars 2018 à 15:17
Et si c'est juste le lecteur : 
.audio audio {
   width: 400px;
   height: 32px;
   margin-left: 30px;
  margin-top: 15px;
   background-color: red;
}
0
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
17 mars 2018 à 15:22
Comment as-tu obtenu ce résultat,?
C'est exactement ce que je veux.
Arrière plan -> rouge
Premier plan -> noir
0
Réponse 3 / 5
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
17 mars 2018 à 17:23
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 mars 2018 à 17:53
Exactement le code que je t'ai donné.
rien de plus


https://forums.commentcamarche.net/forum/s/ip/35264765%2C1
0
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
18 mars 2018 à 06:09
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
Réponse 4 / 5
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
18 mars 2018 à 06:12
Jordane,
Je te mets le résultat sur Edge.
0

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

Posez votre question
Réponse 5 / 5
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
19 mars 2018 à 09:48
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

Télécharger musique MP3 gratuitement avec Tubidy
X-Eddy_18-X -
Ambre.ezzn -

25 réponses
Téléchargement chansons AUDIO
saintaise17 -
saintaise17 -

0 réponse
Téléchargement de musiques MP3 gratuit
nicolas_2012 -
oui -

8 réponses
telecharger musique mp3 gratuit
foufou996 -
SamuelBeckett -

5 réponses
télécharger des musiques,videos...sur mon mp5
cloe22 -
jeanbi -

1 réponse