我的进度条样式不起作用？

Question

我已阅读 3 篇不同的教程，介绍如何专门为我的浏览器设置进度条样式 (Google Chrome)。但是，每次我尝试设置进度条的样式时，它都不会在我去测试时显示。我试图直接从教程中复制并粘贴样式代码，但没有结果。

HTML:

progress[value]::-webkit-progress-bar {
  -webkit-appearance: progress-bar;
  background-color: black;
  display: inline-block;
}
progress[value]::-webkit-progress-bar {
  background-color: red;
}

<progress max="100" value="50"></progress>

显示的是常规进度条，就好像我什么都没做一样，而且我的代码中没有其他进度条，只有那个。

我只是想知道为什么它不起作用，请帮助！

Answer 1

您需要像这样重置默认的 webkit 外观：

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

这里有一个 JSFiddle，供您尝试设置不同进度条伪元素的样式： https://jsfiddle.net/2jha2464/1/

有关更多信息，您应该在 css-tricks.com

上阅读这篇 post

我的进度条样式不起作用？

My progress bar styles are not working?

html

css

progress-bar