Change the color of the progress element

Question

Change the color of the progress element

Navigation

#1 by (2 votes)

1

I want to change the color of the progress bar, but I'm not getting it, how can I change the color of the <progress> element by css?

html5 css css3

asked by anonymous 27.04.2018 / 20:14

1 answer

Save current date -X days in a variable Where am I going wrong in this select?

score 2 · Accepted Answer

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">