Question

可能重复：
How to change the color of a progress bar

我做了一个简单的进度条，但我不知道如何更改条形图的背景颜色，百分比颜色和文本“上次更新”颜色..是否有应该引入的代码？请帮我一些代码/演示示例。谢谢

HTML：

  <table>
    <tr>
        <td>Last updated 1/4/2013:</td>
        <td><div class="progress" data-value="0"><span>0%</span></div></td>
    </tr>

CSS：

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:200px;padding-right:200px;}
.progress[aria-valuenow="0"] 
span {margin-top:0px;}

JavaScript的：

$(document).ready(function() {
    $(".progress").each(function() {
        var progressValue = $(this).data("value");
        $(this).progressbar({
            value: progressValue
        }).children("span").appendTo(this);
    });
});

Answer 1

要更改百分比栏的背景颜色，请添加此CSS规则：

.progress {
  color: red;
}

对于文字颜色：

我建议首先在标题周围添加<h1>标记，使其如下所示：

<td><h1>Last updated 1/4/2013:</h1></td>

然后添加此CSS规则：

td h1 {
  color: red;
}

要更改百分比颜色，请添加以下规则：

.progress span {
  color: blue;
}

另外，请关闭<table>标记。

如何更改进度条的背景颜色

1 个答案: