如何基于CSS和HTML修改网页进度条颜色？

你的进度条填充色是由w3-teal这个W3CSS类控制的，直接替换这个类或者用自定义样式就能改颜色，以下是两种简单可行的方法：

方法1：用W3CSS自带的颜色类 #

W3CSS提供了很多预定义颜色类，比如w3-red、w3-blue、w3-orange、w3-purple等，直接把进度条里的w3-teal换成你想要的类即可。

修改后的示例代码：

<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right text-teal"></i>Skills</b></p>
<p>Adobe Photoshop</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
  <div class="w3-container w3-center w3-round-xlarge w3-blue" style="width:90%">90%</div>
</div>

<p>Illustrator</p>
<div class="w3-light-black w3-round-xlarge w3-small">
  <div class="w3-container w3-center w3-round-xlarge w3-orange" style="width:75%">75%</div>
</div>
<p>Media</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
  <div class="w3-container w3-center w3-round-xlarge w3-purple" style="width:50%">50%</div>
</div>
<br>

<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right text-teal"></i>Languages</b></p>
<p>Urdu</p>
<div class="w3-light-grey w3-round-xlarge">
  <div class="w3-round-xlarge w3-green" style="height:24px;width:100%"></div>
</div>
<p>English</p>
<div class="w3-light-grey w3-round-xlarge">
  <div class="w3-round-xlarge w3-pink" style="height:24px;width:75%"></div>
</div>

方法2：自定义任意颜色 #

如果自带颜色不符合需求，直接用style="background-color:你的颜色值;"替换w3-teal类即可，颜色值可以是十六进制代码、RGB值或者颜色名称。

比如改成自定义深绿色的进度条：

<!-- 带文字的技能进度条 -->
<div class="w3-container w3-center w3-round-xlarge" style="width:90%;background-color:#2E8B57;">90%</div>

<!-- 语言模块的无文字进度条 -->
<div class="w3-round-xlarge" style="height:24px;width:100%;background-color:#2E8B57;"></div>

如果修改后颜色没生效，可在颜色值后加!important强制覆盖原有样式：

background-color:#2E8B57 !important;

内容的提问来源于stack exchange，提问作者HasaN Faisal