CSS中的自定义样式化进度条

我有一个进度条，我想让它远离默认样式。CSS中的自定义样式化进度条

我尝试了一些东西，但没有按预期工作。

我想改变进度条的背景颜色和边框半径。

当我设置背景颜色时，它从默认的蓝色变为绿色，而不是我设置的颜色。

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

您可以看到fiddle。

当我设置background-color时，颜色从蓝色变为绿色，必须变为不同的蓝色。

而且我希望进度条具有平滑的边缘。

我确实设置了border-radius但这也没有解决。

.amount-progress{ 
    width: 80%; 
margin-left: -11.5%; 
height: 22px; 
background-color: #0091EA;

}

来源

2017-02-17 Naveen Kumar

[如何更改HTML5进度条的颜色]的可能重复（http://stackoverflow.com/questions/21476748/how-to-change-the-color-of-html5-progress-bar） – caramba

您有HTML5的工具包，工作进度bar.These目前对HTML5的造型进度条的整个选择：

progress { 
    /* style rules */ 
} 
progress::-webkit-progress-bar { 
    /* style rules */ 
} 
progress::-webkit-progress-value { 
    /* style rules */ 
} 
progress::-moz-progress-bar { 
    /* style rules */ 
}

这样：

progress { 
 
    border-radius: 2px; 
 
    width: 80%; 
 
    height: 22px; 
 
    margin-left:-11.5%; 
 
} 
 
progress::-webkit-progress-bar { 
 
background-color: #0091EA; 
 
    border-radius: 2px; 
 
} 
 
progress::-webkit-progress-value { 
 
    border-radius: 2px; 
 
} 
 
progress::-moz-progress-bar { 
 
    /* style rules */ 
 
}

<progress value="60500" max="120000">70 %</progress>

来源

2017-02-17 08:02:31 Teshtek

CSS中的自定义样式化进度条

回答

相关问题