Own image as slider thumb on range. How to style on css

问题

How do I set an image as a thumb slider on range input type with css? It doesn't work in Internet Explorer. Chrome and Firefox is ok, but on IE my image is hidden or something? I use ::-ms-thumb, and try to set image as background. how can I fix it with CSS?

input[type="range"]::-webkit-slider-thumb 
    {
    -webkit-appearance: none;
    background-image: url('../images/slider.png');
    opacity: 1;
    width: 40px;
    height: 19px;
    position: relative;
    top: 0px;
    z-index: 99;
 }
::-moz-range-thumb{
    background-image: url('../images/slider.png');
    width:40px;
    height:19px;
   }
::-ms-thumb{
    background-image: url('../images/slider.png');
    width:40px;
    height:19px;
    z-index: 9999;
    display: block;
    background-color: transparent;
   }

IE, Chrome & Firefox Sliders http://imageshack.com/a/img401/9131/dqwb.jpg

回答1:

Try using

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    /* IE 10/11 specific style */
    input[type="range"]{
        -webkit-appearance: none !important;
        width:497px;
        height:22px;
        background-image:url('.png');
        background-color:rgba(0,0,0,0);
    }
    .slider::-webkit-slider-thumb{
        -webkit-appearance: none !important;
        height:70px;
        width:70px;
        background-image:url('.png');
    }
    input[type="range"]::-moz-range-track{
        -moz-appearance: none;
        width:497px;
        height:22px;
        background-image:url('.png');
        background-color:rgba(0,0,0,0);
    }
    input[type="range"]::moz-range-thumb {
        -moz-appearance: none;
        height:70px;
        width:70px;
        background-image:none;
    }

    .slider
    {
    width: 226px;
    height: 70px;
    padding: 0px;
    overflow: visible;
    }
    .slider::-ms-thumb
    {
    width: 70px;
    height: 70px;
    padding: 0px;
    border: 0px;
    display:block;
    z-index: 99999;
    background-color: transparent;
    background-image: url('res/img/button.png');
    background-position: center;
    }
    .slider:active::-ms-thumb
    {
    background-image: url('res/img/button.png');
    }
    .slider::-ms-track
    {
    height: 70px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    color: transparent;
    background-color: transparent;
    }
    .slider::-ms-fill-lower, .slider::-ms-fill-upper
    {
    height: 70px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    background-color: transparent;
    background-repeat: no-repeat;
    }
    .slider::-ms-fill-lower
    {
    background-image: url('res/img/slider.png');
    background-position: left top;
    }
    .slider::-ms-fill-upper
    {
    background-image: url('res/img/slider.png');
    background-position: right top;
    }
    input[type="range"].slider::-ms-tooltip
    {
    display: none;
    }
    /* IE 10/11 specific style */  
}

let me know if it worked

回答2:

Trident (Internet Explorer's rendering engine) does not allow the ::ms-thumb pseudo-element to overflow from the ::ms-track. To solve this, you will need the track to be at least as tall as the thumb image. You can still style the track to apear as if it were not the full height, with clever use of backgrounds. Here's an example.

input[type="range"] {
  height: 20px; /* must be at least your image's height */
  width: 400px; /* can be anything */
}

input[type="range"]::ms-track {
  height: 20px; /* must be at least your image's height */
  width: 100%;
  /* there are many techniques to make the track seem smaller than it is. */
  /* this technique uses a linear-gradient to make the track seem 4px tall and solid gray. */
  background: linear-gradient(to bottom, transparent 8px, #ccc 8px, #ccc 12px, transparent 12px);
  /* alternatively, if you have an image for the background: */
  background: url('track.png') no-repeat center;
}

input[type="range"]::ms-thumb {
  /* these should be the dimensions of your image */
  height: 20px;
  width: 20px;
  background: #000; /* or your image */
}

<input type="range">

来源：https://stackoverflow.com/questions/21527475/own-image-as-slider-thumb-on-range-how-to-style-on-css