Question

我有HTML进度条，它会动态更改值

1）我想用一种颜色显示已完成的任务，用其他颜色显示剩余的任务。

2）如果该值超过指定的最大值，则必须以diff颜色显示超出的值。

如何做到这一点。

Answer 1

你可以通过使用css规则来实现你所需要的，在设置你的进度条时，你必须要记住的唯一重要的事情是将它们放在一个选择器中会破坏地球上的每个浏览器（包括polyfilled的浏览器）），所以你必须编写三个单独的规则，其中包含相同的CSS属性。

首先让我们重置进度条的css规则：

progress,          /* All HTML5 progress enabled browsers */
{

    /* Turns off styling - not usually needed, but good to know. */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

}

以下规则是最常用浏览器的基本选择器。通过更改背景颜色（IE中的颜色），您可以根据需要更改条形颜色：

/* IE10 */
progress {
    color: black;
}

/* Firefox */
progress::-moz-progress-bar { 
    background: black;  
}

/* Chrome */
progress::-webkit-progress-value {
    background: black;
}

接下来要做的是更改给定值的颜色，为此您可以使用由progress + [value="value_to_style"]构造的选择器。在下面的示例中，我使用了特定的规则[value^="9"]将红色应用于条形图，以获取以9开头的所有值（91,92,93，...）：

progress[value^="9"]::-moz-progress-bar {
background-color : red;
}

如果您需要显示特殊颜色，如果值为＆gt; max simpy使用上面的规则，其中样式可以放置特殊的背景颜色。

您可以在此jsFiddle

中查看有关如何应用样式的工作示例

如何更改HTML5进度条的颜色

1 个答案: