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

【问题标题】：My progress bar styles are not working?我的进度条样式不起作用？
【发布时间】：2015-08-24 18:19:00
【问题描述】：

我已经阅读了 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;
}

&lt;progress max="100" value="50"&gt;&lt;/progress&gt;

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

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

【问题讨论】：

标签： html css progress-bar

【解决方案1】：

您需要使用以下内容重置默认 webkit 外观：

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

这里有一个 JSFiddle 供你玩弄不同进度条伪元素的样式： https://jsfiddle.net/2jha2464/1/

有关更多信息，您应该阅读 css-tricks.com 上的 post

【讨论】：