Mobirise-Tutorials.com

Moin,

ich habe gestern dem Audio-Player:

... den ich als BBCode für den Forum-Editor entwickelt habe:

[audio=https://www.mobirise-tutorials.com/music/sunrise.mp3][/audio]

... der durch dieses Tag erzeugt wird:

Code: Alles auswählen

<audio src="{URL}" controls>{TEXT}</audio>

... ein wenig CSS gegeben, damit der Player in den unterschiedlichen Browsern halbwegs ähnlich dargestellt wird, und möchte meine Änderung der CSS-Datei vom Forum hier mit euch teilen:

Code: Alles auswählen

/* changed by Tommy - audio player  BBCode */
audio {
  width: 300px;
  max-width: 90%;
  height: 30px;
  transition: all 0.5s linear;
  box-shadow: 2px 2px 4px 0px #006773;
  border-radius: 30px;
  background-color: blue !important;
  opacity: 0.8;
}
audio::-webkit-media-controls-panel {
  background-color: lightblue;
}
audio:hover, audio:focus, audio:active {
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

Kann mir jemand folgendes sagen:

1) wieso wird das Pseudo-Element vom Notepad++ Editor angemeckert:

Code: Alles auswählen

audio::-webkit-media-controls-panel

Nur so funktioniert die Farbänderung in Chrome basierten Browsern. Im Firefox muss das dagegen ohne Pseudo-Element angegeben sein.

2) warum nimmt der Chrome basierte Browser nicht die Farbe "blue" an, sondern nur die Farbe "lightblue". Der Firefox will dagegen "lightblue" nicht darstellen, sondern nur "blue"

Mobirise-Tutorials.com

CSS Frage zum Audio Player in unterschiedlichen Browsern

CSS Frage zum Audio Player in unterschiedlichen Browsern