通过jquery更改webkit-slider-thumb的背景图片

我搜索了一会儿，但找不到任何有用的东西。我有以下的CSS

input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 10px; background-image: url('http://sofzh.miximages.com/javascript/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 console测试。所以我有类似的东西：

 `background-image: url('http://sofzh.miximages.com/javascript/test.png'),` 

任何人都可以提到正确的语法。 感谢您的好评。

Answer 1

我正在发布解决方案，对于任何面临同样问题的人都有用。因为我想动态改变-webkit-slider-thumb的CSS，所以我做了类似的事情，我使用了一个类来输入并添加了css for这个class这样

 .first_class::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 10px; background-image: url('http://sofzh.miximages.com/javascript/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的图像谢谢所有试图帮助的人。

Answer 2

我有一个小黑客的方式来帮助你。

在这里，我在

标签中input[type="range"]::-webkit-slider-thumb了与input[type="range"]::-webkit-slider-thumb相同的选择器，并将其附加到的最后一个。

然后，这种风格将涵盖您编写的background-image 。

 $('').appendTo('head'); 

jsFiddle代码

我已将我的anwser更新为TJ

Answer 3

 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(http://sofzh.miximages.com/javascript/QneFV.png) 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(http://sofzh.miximages.com/javascript/QneFV.png) 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(http://sofzh.miximages.com/javascript/QneFV.png) 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; } 

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设置style属性：

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

而且你可以在伪元素中使用它们，我相信这是2018年的最佳解决方案。