bulma - 如何在 Bulma 中为进度条使用自定义颜色？

Question

我有 3 个 Bulma 进度条，我想将每个进度条的值颜色更改为不同。

<progress class="progress" value="15" max="100">15%</progress>
<progress class="progress" value="15" max="100">15%</progress>
<progress class="progress" value="15" max="100">15%</progress>

更改 SCSS 变量 $progress-value-background-color使所有进度条值都具有相同的颜色，这不是我想要发生的。我也不想使用预定义的 Bulma 颜色类。

Answer 1

您可以使用自己的样式，就像在类部分中的“is-success”一样，您只需在样式部分中定义您的值

 .progress.is-YOURNAME::-webkit-progress-value {
    background-color: rgba($color: #YOURVALUES, $alpha: 1.0)
  }

  .progress.is-YOURNAME::-moz-progress-bar {
    background-color:rgba($color: #YOURVALUES, $alpha: 1.0)
  }

  .progress.is-YOURNAME::-ms-fill {
    background-color:rgba($color: #YOURVALUES, $alpha: 1.0)
  }

  .progress.is-YOURNAME:indeterminate {
    background-image: linear-gradient(to right, rgba($color: #YOURVALUES, $alpha: 1.0) 30%, #ededed 30%);
  }