javascript - 如何更改进度条样式？

Question

我想改变html中进度条的默认样式，基本上我需要改变进度条的渐变颜色并增加高度和宽度

#progressBar {
  background-color: #bd4f6c !important;
  background-image: linear-gradient(326deg, #bd4f6c 0%, #d7816a 74%) !important;
  border-radius: 10px;
}

<form id="upload_form" action="final.php" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1" onchange="show_pro();">
  <div id="text"></div>
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <span id="status"> 
          </span>
  <p id="loaded_n_total"></p>
  <input type="submit" name="sub">
</form>

Answer 1

尝试使用 background-image。更多详情在此 article

progress,
progress[value]::-webkit-progress-bar {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress,
progress[value]::-webkit-progress-value {
  background-image: #C02425;
  background-image: linear-gradient(to right, #F0CB35, #C02425);
}

<div>
  0% progress
  <progress id="progressBar1" value="0" max="100" style="width:300px;"></progress>
</div>
<div>
  10% progress
  <progress id="progressBar2" value="10" max="100" style="width:300px;"></progress>
</div>