Chrome 浏览器的输入范围滑块进度

Posted 2023-03-06

【中文标题】Chrome 浏览器的输入范围滑块进度

【英文标题】：Input range slider progress for Chrome browser

【发布时间】：2021-04-20 15:23:47

【问题描述】：

我正在研究输入类型范围滑块。我发现input[type=range]::-moz-range-thumb的Chrome版本是input[type=range]::-webkit-slider-thumb。

现在，我希望 input[type=range]::-moz-range-progress 也一样。

我试过input[type=range]::-webkit-slider-progress，input[type=range]::-webkit-slider-runnable-progress。

到目前为止还没有工作。有什么选择吗？

【问题讨论】：

你试过::-webkit-progress-value background-color: orange;

@martinho 不，但我刚刚做了，但没有用。

与input[type=range]::-webkit-progress-value background-color: orange; 添加input[type=range] -webkit-appearance: none; - developer.mozilla.org/en-US/docs/Web/CSS/…

::-webkit-progress-value 仅适用于 元素而不是输入类型的范围。

【参考方案1】：

在 Internet Explorer 上，你可以使用 ::-ms-fill-lower 来做这件事，firefox 支持 ::-moz-range-progress，但在 chrome 上，这仅使用 css 是不可能的。

但是，下面有一个使用 JS 的好例子。 它使用linear-gradient 更改范围元素的背景。 https://codepen.io/duplich/pen/qjYQEZ