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 console中测试。所以我有类似的东西：

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

有人可以提一下正确的语法。感谢你们期待有利的回应。

Answer 1

我发布的解决方案对任何面临同样问题的人都有用。因为我想动态改变-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拇指 谢谢所有试图帮助的人。

Answer 2

我有一些小方法来帮助你。

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

然后，这种风格将涵盖你曾经写过的background-image。

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

jsFiddle Code

我已将我的anwser更新为T.J。

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(https://i.stack.imgur.com/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(https://i.stack.imgur.com/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(https://i.stack.imgur.com/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;
}

<input type="range" />

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年的最佳解决方案。

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

4 个答案: