html - 在 Firefox 中设置进度元素的样式。CSS

Question

我想使用 WebKit 在 Firefox 中设置进度条的样式，并遵循它适用于 chrome 但不适用于 Firefox 的代码

progress::-webkit-progress-value {
  background-color: var(--orange);
  border-radius: 8px;
}


progress::-webkit-progress-bar {
  background-color: whitesmoke;
  border-radius: 8px;
}

如何设置进度条值和条的样式。

Answer 1

<progress>元素通过改变一些浏览器属性选择器的背景。

在 Firefox 中，您可以使用以下内容：

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

progress::-moz-progress-bar { background: blue; }/* for Firefox */
progress::-webkit-progress-value { background: blue; }/* for Chrome/safari*/
progress { color: blue; }/* for IE10  */

<progress value="0" max="100"></progress><br>
<progress value="25" max="100"></progress><br>
<progress value="50" max="100"></progress><br>
<progress value="75" max="100"></progress><br>
<progress value="100" max="100"></progress><br>