Question

我需要根据你的价值改变进度的颜色。我看到下面的代码工作

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

在上面的代码中，我可以更改颜色，但在我的情况下，我使用的技术（GWT 2.7）不支持运算符＆＃34; ^＆＃34;。

我看到的代码如下：

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

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

事先提前

Answer 1

我使用css class bellow

实现了结果

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

我遇到的独特问题是伪选择器：之前不能正常进行元素（Firefox）。在Chrome工作正确。

如何动态更改进度颜色

1 个答案: