Change the color of the <Progress> element

Asked

Viewed 549 times

1

I’m trying to change the color of the progress bar, <progress> by css?

css html5 css3

  • Post the code you have already developed to make it easier to receive help!

1 answer

2


You can change the colors by changing the value of background-color in the pseudo-elements below:

  • ::-moz-progress-bar
  • ::-ms-fill
  • ::-webkit-progress-bar
  • ::-webkit-progress-value
  • ::-webkit-progress-inner-element

Example commenting:

progress {
  /* Altera a cor do background no Firefox e navegadores da Microsoft */
  background: yellow;

  /* É necessário alterar o valor para none */
  -webkit-appearance: none;
}

/* Altera a cor de fundo em navegadores com webkit (Chrome, Safari etc) */
::-webkit-progress-value {
  background-color: orange;
}

/* Altera a cor da barra em navegadores com webkit (Chrome, Safari etc) */
::-webkit-progress-bar {
  background-color: green;
}

/* Altera a cor da barra em navegadores com moz (Firefox) */
::-moz-progress-bar {
  background-color: blue
}

/* Altera a cor da barra em navegadores da Microsoft (IE e Edge) */
::-ms-fill {
  background-color: purple
}
<progress value="10" max="50">

Browser other questions tagged css html5 css3

You are not signed in. Login or sign up in order to post.