我想更改进度标签的颜色

Question

我已尽力更改 <progress> 标签值的颜色。
而不是使用传统的CSS。我正在使用 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>

关于我的代码出现问题的任何想法。

Answer 1

/当你想使用渐变时，你可以应用你选择的颜色而不是 rgb(2, 0, 36) 和 rgba(18, 189, 223, 1)/ /**如果您不想使用渐变，只需将 progress::-webkit-progress-value 的内容替换为 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>

我想更改进度标签的颜色

I want to change the colour of my Progress tag

html

css

sass