使用 css 更改范围进度颜色

Question

你好，我有这个输入类型范围，最小值和最大值。
我现在想更改范围进度颜色，全部为黑色

<section class="range-slider car-mileage-range">

  <input value="10" min="10" max="41181" step="1" type="range">
  <input value="41181" min="10" max="41181" step="1" type="range">
</section>

这是我的CSS：

section.range-slider input {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 15px;
    width: 100% !important;
    outline: none;
    height: 18px;
    margin: 0;
    padding: 0;
}
section.range-slider input {
    width: 100% !important;
}
input[type="range"] {
    height: 2px !important;
    background: black;
    cursor: pointer;
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    overflow: visible !important;
}
input[type="range"] {
    display: block;
    width: 100%;
}
input {
    border-radius: 1px !important;
}

所以要更改我尝试使用的进度颜色：

input[type=range]::range-progress {
  background-color: red;
  height: 1em;
  color: red;
}

还有：

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

但这些都不适合我
有没有解决这个问题的css或javascript方法？

Answer 1

伪元素 ::-moz-range-progress 仅适用于 Firefox。对于另一个支持使用以下的浏览器：

progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: red;
}

但这适用于<progress> 元素，而不是输入类型为“范围”。另请参阅：webkit-progress-bar、moz-progress-bar。 对于输入，您应该注意以下伪元素：

input[type=range]::-webkit-slider-runnable-track
input[type=range]::-webkit-slider-thumb
input[type=range]::-moz-range-track
input[type=range]::-moz-range-thumb

这些可以帮助您自定义输入