更改进度条的颜色

可以使用 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; 
}