更改進度條的顏色

可以使用 progress[value] 選擇器設定進度條的樣式。

此示例給出了一個進度條，其寬度為 250px，高度為 20px

progress[value] {
  width: 250px;
  height: 20px;
}

進度條可能特別難以定型。

Chrome / Safari / Opera

這些瀏覽器使用 -webkit-appearance 選擇器設定進度標記的樣式。要覆蓋它，我們可以重置外觀。

progress[value] {
  -webkit-appearance: none;
  appearance: none;
}

現在，我們可以為容器本身設定樣式

progress[value]::-webkit-progress-bar {
  background-color: "green";
}

Firefox

Firefox 對進度條的設定略有不同。我們必須使用這些樣式

progress[value] {
  -moz-appearance: none;
  appearance: none;
  border: none;                /* Firefox also renders a border */
}

IE 瀏覽器

Internet Explorer 10+支援 progress 元素。但是，它不支援 background-color 屬性。你需要使用 color 屬性。

progress[value]  {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  border: none;                       /* Remove border from Firefox */

  width: 250px;
  height: 20px;

  color: blue; 
}