0

I want to make the background for the audio player be transparent. With the thing I tried I can change the color to any color but it wasn't working when I put transparent. 

audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     background-color: transparent;
     }
dciweivq rfn1ur
  • 1
  • 5
  • do you mean, you need it to disappear? – Francis G Jun 29 '22 at 02:20
  • it literally says in there its possible and shows my exact way of changing the background color, my question is if it lets me change the background color why can't i make it transparent – dciweivq rfn1ur Jun 29 '22 at 02:20
  • You could use opacity to make it transparent – Francis G Jun 29 '22 at 02:21
  • how would that work and can you give like a quick line of code which i could try – dciweivq rfn1ur Jun 29 '22 at 02:22
  • instead of giving transparent just give the main background to the audio, it will update the same color. Eg: my body tag background is white so I applied #fff to "audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel { background-color: #fff; color: #fff; }" – Snow Jun 29 '22 at 02:26
  • i tried it but it just gave like a light gray when i set the opacity to 0 – dciweivq rfn1ur Jun 29 '22 at 02:27
  • @Snow: Im doing that currently but the problem is that i have a like a box which the color is blue, and then a white background for the body, the audio player is in the blue box, when the screen size gets smaller the audioplayer sticks out the blue box – dciweivq rfn1ur Jun 29 '22 at 02:30

2 Answers2

1

Like @snow said, you can't make the background transparent but you could make its opacity 0
something like this:

audio{
  opacity: 0%;
}
Francis G
  • 1,040
  • 1
  • 7
  • 21
0

is it possible to change just using CSS? the short answer is no, It's NOT possible. An audio player is an object created by the browser itself, that's why it looks different depending on the browser you use.

You can apply the same background color to the audio tag if your parent or body background is white you need to apply the same for audio

audio::-webkit-media-controls-play-button,
 audio::-webkit-media-controls-panel {
 background-color: #fff;
 color: #fff;
 
 }

enter image description here

Snow
  • 92
  • 1
  • 12
  • Im doing that currently but the problem is that i have a like a box which the color is blue, and then a white background for the body, the audio player is in the blue box, when the screen size gets smaller the audioplayer sticks out the blue box – dciweivq rfn1ur Jun 29 '22 at 02:34
  • Could you post the design on your question that you want to achieve? – Snow Jun 29 '22 at 02:41
  • I just want the audioplayer to be transparent but the play button to be there and have a black color – dciweivq rfn1ur Jun 29 '22 at 02:43