如何动态更改进度颜色

【问题标题】：How can I change the progress color dynamically如何动态更改进度颜色
【发布时间】：2017-06-06 14:45:00
【问题描述】：

我需要根据您的值更改进度的颜色。我看到下面的代码有效

progress[value^"50"]::-moz-progress-bar{background-color:green}

在上面的代码中，我可以更改颜色，但在我的例子中，我使用了不支持运算符“^”的技术（GWT 2.7）。

我也看到了这样的代码：

#pb::-moz-progress-bar {background-color: green;}

但在我的情况下，我应该动态更改背景颜色的值。

提前通知

【问题讨论】：

标签： html css gwt progress-bar progress

【解决方案1】：

我使用下面的 css 类实现了结果

progress:before  {
    content: attr(data-label);
    color: white;
    vertical-align: 0;

     /*Position text over the progress bar */
     position:absolute;
    text-align:center;
    left:0;
    right:0;
}

progress {
    -webkit-appearance: none;
    background-color: gray;
    position:relative;
    height: 15px;
    width: 255px;
}
.progressBarRed::-moz-progress-bar {
    width: 250px;
    height: 15px;
    border-style: solid;
    border: 1px;
    background-color: red;
}

我遇到的唯一问题是伪选择器 :before 在进行中元素（Firefox）不起作用。在 Chrome 中工作是正确的。

【讨论】：