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

【问题标题】：How to use custom color for progress bar in Bulma?如何在 Bulma 中为进度条使用自定义颜色？
【发布时间】：2019-09-01 18:21:40
【问题描述】：

我有 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 颜色类。

【问题讨论】：

标签： bulma

【解决方案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%);
  }

【讨论】：

【解决方案2】：

Just in css and use a class for every progress bar
.progress::-webkit-progress-value {
    background-color: #your-color !important;
}
.progress::-moz-progress-bar {
    background-color: #your-color !important;
}
  
.progress::-ms-fill {
    background-color: #your-color !important;
    border: none;
}

【讨论】：