Modifier l'image de fond de webkit-slider-thumb par jquery

J'ai cherché un moment, mais je n'ai rien trouvé utile. J'ai le css suivant

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;

}

Maintenant, je souhaite modifier l'image de fond vers une autre image src par l'aide de jquery ou javascript simple que je peux tester à partir de la console Chrome. Donc j'ai quelque chose comme:

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

Quelqu'un pourrait-il mentionner la syntaxe correcte. Je vous remercie en prévision d'une réponse favorable.

Je publie une solution qui a fonctionné pour moi pour toute personne confrontée au même problème. Comme je voulais changer le css du "webkit-slider-thumb" à la volée, alors j'ai fait quelque chose comme ça, j'ai utilisé une classe pour la saisie et ajouté css pour Cette classe comme celle-ci

 .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%; }

J'ai également ajouté l'autre ensemble de css sous un nom de classe différent de celui-ci

 .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%; }

Ensuite, en utilisant Jquery, j'ai changé les classes chaque fois que je devais changer le css, c'est-à-dire si je supprime la première first_class et ajoute la second_class à l'entrée, elle changera l'image du "webkit-slider-thumb" Merci à tous ceux qui ont essayé d'aider.

J'ai un petit moyen pour vous aider.

Ici, j'ai écrit un même sélecteur que l' input[type="range"]::-webkit-slider-thumb dans une <style> et l'ajoute au dernier de <head> .

Ensuite, ce style couvrira l' background-image vous avez déjà écrite.

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

JsFiddle Code

J'ai mis à jour mon argument comme TJ