通过 jQuery 更改 Webkit-Slider-Thumb 的背景图片

Question

我找了一会儿，但没找到有用的东西。我有以下css：

 input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
         width: 20px;
         height: 20px;
         border-radius: 10px;
         background-image: url('http://www.w3schools.com/html/smiley.png'),
         -webkit-gradient(
             linear,
             left top,
             left bottom,
             color-stop(0, #fefefe),
             color-stop(0.49, #dddddd),
             color-stop(0.51, #d1d1d1),
             color-stop(1, #a1a1a1)
         );
         background-size:20px;
         background-repeat: no-repeat;

现在我想通过jQuery或纯JavaScript更改背景图像到其他图像src，以便我可以从Chrome控制台进行测试。这样我就有了：

`background-image: url('http://someotherimage/test.png'),`

请问有人可以提供正确的语法吗？非常感谢你的积极回应。

- Aameer

---

FYI，应该是“with jQuery”，而不是“by jQuery”。在另一种语言中，这些小词最难学习！ - T.J. Crowder

@T.J.Crowder，无论哪种方式都能完成工作。 - Aameer

Aameer：关键是“通过jQuery”是错误的。 - T.J. Crowder

@T.J.Crowder，能否通过纯JavaScript实现呢？如果可以的话，那对我也适用。如果不行，是否有其他动态更改的方法？感谢您的时间。 - Aameer

Answer 1

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 50px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  height: 50px;
  width: 50px;
  border-radius: 3px;
  background-color: transparent;
  background: url(https://istack.dev59.com/QneFV.webp) center center no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -23px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  height: 50px;
  width: 50px;
  border-radius: 3px;
  background-color: transparent;
  background: url(https://istack.dev59.com/QneFV.webp) center center no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -23px;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  height: 50px;
  width: 50px;
  border-radius: 3px;
  background-color: transparent;
  background: url(https://istack.dev59.com/QneFV.webp) center center no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -23px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

<input type="range" />

- Raz Galstyan

Answer 2

我发表了一个解决方案，对于遇到同样问题的人有用。因为我想要在运行时更改-webkit-slider-thumb的CSS，所以我做了以下操作：使用类来为输入添加CSS并像这样添加类。

.first_class::-webkit-slider-thumb {
           -webkit-appearance: none;
             width: 20px;
             height: 20px;

             border-radius: 10px;
             background-image: url('http://www.w3schools.com/html/smiley.png'),
             -webkit-gradient(
                 linear,
                 left top,
                 left bottom,
                 color-stop(0, #fefefe),
                 color-stop(0.49, #dddddd),
                 color-stop(0.51, #d1d1d1),
                 color-stop(1, #a1a1a1)
             );
             background-size:20px;
             background-repeat: no-repeat;
             background-position: 50%;
         }

我还添加了另一组CSS，使用不同的类名，就像这样：

.second_class::-webkit-slider-thumb {
       -webkit-appearance: none;
         width: 20px;
         height: 20px;

         border-radius: 10px;
         background-image: url('http://someotherimage/test.png'),
         -webkit-gradient(
             linear,
             left top,
             left bottom,
             color-stop(0, #fefefe),
             color-stop(0.49, #dddddd),
             color-stop(0.51, #d1d1d1),
             color-stop(1, #a1a1a1)
         );
         background-size:20px;
         background-repeat: no-repeat;
         background-position: 50%;
     }

然后使用Jquery，每当需要更改CSS时，我会更改类，即如果我从输入中删除first_class并添加second_class，它将更改-webkit-slider-thumb的图像。感谢所有试图帮助我的人。

- Aameer

Answer 3

我有一个小技巧来帮助您。

在<head>中，我编写了一个与input[type="range"]::-webkit-slider-thumb相同的选择器，并将其附加到最后一个位置。

这样，这个样式会覆盖您之前编写的background-image。

$('<style>input[type="range"]::-webkit-slider-thumb { background-image: url("http://someotherimage/test.png");}<style/>').appendTo('head');

jsFiddle 代码

我已经更新了我的答案，就像 T.J. 所说的那样。

- Edisonator

---

这并不是什么黑客行为，因为这是你唯一能做的方式。没有直接的方法来设置伪元素的样式，你必须使用样式规则。我不会用 html() 来设置 CSS 内容，我不确定它是否可靠。但解析整个标签是可靠的，所以：$("<style>/* ...CSS content...*/</style>").appendTo('head'); - T.J. Crowder

Answer 4

现在有一种CSS3的方法可以更简单、更清晰地实现这一点。

在您的HTML标签中，您定义一个style标签，如下所示：

style="--img-path:url('/images/small_blue_inner.svg') no-repeat 8px 8px #fff;"

在您的CSS样式表中，您的背景将会是：

background:var(--img-path);

然后，您可以像平常设置样式属性一样用jquery来设置它:

$(slider).attr('style',"--img-path:url('/images/small_ALT_Img.svg') no-repeat 8px 8px #fff;--img-border:1px solid #11b6d1");

由于您可以在伪元素中使用它们，我认为这是2018年最好的解决方案。

- Ukuser32