时间戳

首页 > 解决方案 > 使用 JavaScript 更改范围输入样式

javascript - 使用 JavaScript 更改范围输入样式

问题描述

::-webkit-slider-thumb您可以使用, ::-moz-range-thumb&选择器更改 HTML5 滑块的“拇指”（旋钮）的 CSS 样式::-ms-thumb。

::-webkit-slider-runnable-track您可以使用, ::-moz-range-track&选择器更改 HTML5 滑块的“轨道”（凹槽）的 CSS 样式::-ms-track。

但是如果我想通过 JavaScript 改变“拇指”或“轨道”的样式怎么办？

这可能吗？如果这是可能的，我该怎么做？

标签： javascripthtmlcsscss-selectorspseudo-element

解决方案

正如您所发现的，这可以通过自定义属性来完成，并且假设浏览器兼容性不是问题（我不知道是否有任何浏览器，特别是 Edge 和 Safari，在伪元素上的自定义属性方面存在问题，但它是值得一试），自定义属性是使用 JavaScript 自定义伪元素样式的理想方式，作为 CSSOM 目前仅支持读取伪元素样式但不支持编写它们的一种解决方法。

如果您担心浏览器兼容性，则必须使用老式方法，如下所述：

但是，您总是可以找到其他解决方法，例如：

  • 将样式应用于一个或多个任意类的伪元素，然后在类之间切换（请参阅seucolega 的答案以获取快速示例）——这是惯用的方式，因为它使用简单的选择器（伪元素不是）来区分元素和元素状态，以及它们的使用方式

  • 通过更改文档样式表来操纵应用于所述伪元素的样式，这更像是一种黑客行为

...同一个问题的其他答案给出了更多的例子。

推荐阅读