如何动态更改进度颜色

Question

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

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

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

我也看到了这样的代码：

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

但在我的例子中，我应该动态地改变背景颜色的值。

提前谢谢

Answer 1

我使用下面的 css class 获得结果

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 在 progress 元素 (Firefox) 中不起作用。在Chrome工作的权利。

如何动态更改进度颜色

How can I change the progress color dynamically

html

css

gwt

progress-bar

progress