Question

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

<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可使所有进度条值具有相同的颜色，这不是我想要的。我也不想使用预定义的布尔玛颜色类别。

Answer 1

添加此类：

<progress class="progress is-primary" value="15" max="100"></progress>

可用的类。
is-link
is-info
成功
警告
危险

Answer 2

您可以像在类部分中使用“ 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%);
  }

Answer 3

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;
}

如何在布尔玛中为进度条使用自定义颜色？

3 个答案: