I want to change the colour of my Progress tag

user_18526338 0
Viewed 43

I have tried my best to change the color of the value of the <progress> tag.
Instead of using traditional CSS. I am using SCSS.

progress {
  border: none;
  width: 400px;
  height: 60px;
  background: crimson;
}

progress {
  color: lightblue;
}

progress::-moz-progress-bar {
  background: lightcolor;
}

progress::-webkit-progress-value {
  background: rgb(2,0,36);
background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(223,168,231,1) 0%, rgba(18,189,223,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(223,168,231,1) 0%, rgba(18,189,223,1) 100%);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(223,168,231,1) 0%, rgba(18,189,223,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#12bddf",GradientType=1);
}

progress::-webkit-progress-bar {
  background: blue;
}
<progress min = "0" max = "100" value = "80">80%</progress>
Any ideas about what is happening wrong with my code.

sass css html
1 Answers

/Instead of rgb(2, 0, 36) and rgba(18, 189, 223, 1) you can apply the color of your choice when you want to use a gradient/ /**If you don't want to use a gradient simply replace the content of progress::-webkit-progress-value by background: yourcolor; 

progress {
    border: none;
    width: 400px;
    height: 60px;
    background: crimson;
}

progress::-webkit-progress-value {
    background: linear-gradient(rgb(2, 0, 36) 0%, rgba(18, 189, 223, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(18, 189, 223, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(18, 189, 223, 1) 100%);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(18, 189, 223, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#020024", endColorstr="#12bddf", GradientType=1);
}
<progress min="0" max="100" value="80">80%</progress>

user_169166010
Related