::-moz-range-progress

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

::-moz-range-progress CSS 伪元素 是一个 Mozilla 扩展，表示轨道（即凹槽）的下部，指示器在其中滑动 <input> 的 type="range"。此部分对应于当前由滑块（即虚拟旋钮）选择的值以下的值。

注意：将 ::-moz-range-progress 与除 <input type="range"> 之外的任何内容一起使用都不会匹配任何内容，也不会产生任何影响。

语法

css
::-moz-range-progress {
  /* ... */
}

示例

HTML

html
<input type="range" min="0" max="100" step="5" value="50" />

CSS

css
input[type="range"]::-moz-range-progress {
  background-color: green;
  height: 1em;
}

结果

使用此样式的进度条可能如下所示

The progress bar is a thick green square to the left of the thumb and a thin grey line to the right. The thumb is a circle with a diameter the height of the green area.

规范

不属于任何标准。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅