::-moz-range-progress

非标准:此特性未标准化。我们不建议在生产环境中使用非标准特性,因为它们浏览器支持有限,并且可能会更改或被移除。但是,在没有标准选项的特定情况下,它们可以是合适的替代方案。

::-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.

规范

不属于任何标准。

浏览器兼容性

另见