如何在HTML中更改进度条值的颜色？

Question

progress {
  border: none;
  width: 400px;
  height: 60px;
  background: crimson;
}

progress {
  color: lightblue;
}

progress::-webkit-progress-value {
  background: lightblue;
}

progress::-moz-progress-bar {
  background: lightcolor;
}

<div>
  <progress min="0" max="100" value="63" />
</div>

我已经尝试了几乎所有方法，但进度条的颜色值仍然没有改变。唯一响应改变的浏览器是IE。Firefox只允许更改背景颜色。Chrome根本没有显示任何内容。您能发现我的代码有什么问题吗？

- CeeJay

---

默认情况下，这是由操作系统/浏览器进行样式设置的，但您可以使用 -webkit-appearance 覆盖它（请参见 https://css-tricks.com/html5-progress-element/#article-header-id-4） - Shameen

-moz-progress-bar 里有拼写错误吗？ lighcolor=lightblue？但在 Firefox 中对我有效。https://jsfiddle.net/t0znpjht/ - Auskennfuchs

@VadimOvchinnikov 嗯，它在IE中运行良好，现在在Firefox中也可以。至于Chrome，它什么都不显示 - 空白屏幕... - CeeJay

@CeeJay，RenzoCC的回答对你有用吗？ - Vadim Ovchinnikov

@VadimOvchinnikov 我在Chrome浏览器上仍然遇到问题，但其他浏览器似乎现在工作正常。 - CeeJay

Answer 1

progress {
  border: none;
  width: 400px;
  height: 60px;
  background: crimson;
}

progress {
  color: lightblue;
}

progress::-moz-progress-bar {
  background: lightblue;
}

progress::-webkit-progress-value {
  background: red;
}

progress::-webkit-progress-bar {
  background: blue;
}

It will work on webkit browser, like this example

<div>
  <progress min="0" max="100" value="63" />
</div>

- Renzo Calla

---

为什么你在另一个CSS规则中有颜色属性，它不也可以放在第一个规则中吗？ - Danish Ansari

为什么有两个 "progress::-webkit-progress-value {}"？ - Ben

不必两次使用“progress：-webkit-progress-value”，答案已更新。 - Renzo Calla

Answer 2

不必自己制作进度条，你可以直接使用accent-color变量来代替color或者background。

progress {
  width: 400px;
  height: 60px;
}

.colored {
  accent-color: red;
}

<div>
  <p>Default: <progress min="0" max="100" value="63" /></p>
  <p>Colored: <progress class="colored" min="0" max="100" value="63" /></p>
</div>

- Elikill58

Answer 3

你能做的事情相当有限，但这个应该能解决问题。

progress {
   -webkit-appearance: none;
}
progress::-webkit-progress-bar-value {
  -webkit-appearance: none;
  background: orangered;
}

- Joaquin Diaz

---

::-webkit-progress-bar-value 是无效的。 - leonheess

Answer 4

请使用以下代码：

accent-color:"#fff

- Sahil Jaryal

---

“仅有代码的答案并不是高质量的答案”。虽然这段代码可能很有用，但您可以通过解释它为什么有效、如何有效、何时应该使用以及其限制是什么来改进它。请编辑您的答案，包括解释和相关文档链接。 - Stephen Ostermiller