Outline html5 audio element

问题

I have disabled the browser outline from showing because I'd like to implement my own that's always there - not just when the audio element is clicked.

.audio-player {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 500px) {
  .audio-player {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.audio-center {
  margin-left: auto;
  margin-right: auto;
  display: block;
  box-shadow: 0px 0.25px 5px #000000;
}

audio {
  outline: none;
  display: block;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

<div class="audio-player">
  <div>
    <audio class="audio-center" controls controlsList="nodownload">
            <source src="audio.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
         </audio>
  </div>
</div>

I could set the border-radius of the outline to 25px and it'd look fine in Chrome.

.audio-player {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 500px) {
  .audio-player {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.audio-center {
  margin-left: auto;
  margin-right: auto;
  display: block;
  box-shadow: 0px 0.25px 5px #000000;
  border-radius: 25px;
}

audio {
  outline: none;
  display: block;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

<div class="audio-player">
  <div>
    <audio class="audio-center" controls controlsList="nodownload">
            <source src="audio.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
         </audio>
  </div>
</div>

Surely though there's a way to outline the actual audio element that outlines the browser's native styling for the audio element?

UPDATE The audio element should be outlined. Setting a border radius works for the edge audio player but not the chrome one so there needs to be a way to add a border that fits and outlines the audio element on all browsers.

来源：https://stackoverflow.com/questions/62156596/outline-html5-audio-element

标签

html

css

html5-audio