change background image of webkit-slider-thumb by jquery

前端 未结 4 1394
死守一世寂寞
死守一世寂寞 2021-01-22 17:56

I searched for a while but couldn\'t find anything useful.I have the following css

 input[type=\"range\"]::-webkit-slider-thumb {
       -webkit-appearance: none         


        
4条回答
  •  [愿得一人]
    2021-01-22 18:32

    I am posting solution which worked for me for anyone facing the same issue.As I wanted to change the css of the -webkit-slider-thumb on the fly so I did something like this I used a class for the input and added css for this class like this

    .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, #ffffdffffd),
                     color-stop(0.51, #d1d1d1),
                     color-stop(1, #a1a1a1)
                 );
                 background-size:20px;
                 background-repeat: no-repeat;
                 background-position: 50%;
             }
    

    I also added the other set of css under a different class name like this

    .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, #ffffdffffd),
                 color-stop(0.51, #d1d1d1),
                 color-stop(1, #a1a1a1)
             );
             background-size:20px;
             background-repeat: no-repeat;
             background-position: 50%;
         }
    

    Then using Jquery I changed the classes whenever I needed to change the css, i.e if I remove the first_class and add second_class to the input it will change the image of the -webkit-slider-thumb Thankyou for all those who tried to help.

提交回复
热议问题