在范围滑块上使用自定义图像作为滑块拇指。如何在CSS中进行样式设置。

Question

我如何使用CSS将图像设置为范围输入类型的滑块？在Internet Explorer中无法正常工作。 在Chrome和Firefox中可以，但在IE中我的图像被隐藏或其他原因？我使用 ::-ms-thumb ，并尝试将图像设置为背景。 我该如何使用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 滑块 http://imageshack.com/a/img401/9131/dqwb.jpg

- marcinH0

---

你有解决这个问题的方法吗？我也遇到了同样的问题，但没有图片，只是试图将拇指从滑块轨道的边界中移出。 - Mal Curtis

Answer 1

尝试使用

标签

。

@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 */  
}

如果它有效，请告诉我。

- Adam Touhou

---

对我来说，它没有直接运行。在IE 11中，它会产生一些奇怪的效果，但在Chrome和Mozilla中完全没有效果。 - Kirill Slatin

Answer 2

我曾经为此苦苦挣扎，但是现在我想我有了一个答案。

用较小的宽度/高度样式化您的拇指，然后对其应用缩放变换。

input[type="range"]::-webkit-slider-thumb {
  width: 1px;
  height: 1px;
  transform: scaleX(100) scaleY(100);
}

input[type="range"]::-moz-range-thumb {
  width: 1px;
  height: 1px;
  transform: scaleX(100) scaleY(100);
}    

input[type="range"]::::-ms-thumb {
  width: 10px;
  height: 10px;
  transform: scaleX(10) scaleY(10);
}

因为变换发生在布局后，所以输入会响应好像你在移动小拇指，但显示的拇指（和“可点击”区域）要大得多。

您可以尝试调整宽度、高度、scaleX 和 scaleY 值，直到实现所需的行为和样式。

从用户体验的角度来看，唯一可能或可能不希望的事情是，如果您点击拇指的边缘，它将将中心捕捉到该位置。

希望它有所帮助。

- Connor Lishman

Answer 3

Trident（Internet Explorer的渲染引擎）不允许::ms-thumb伪元素从::ms-track中溢出。为了解决这个问题，您需要将轨道的高度至少与拇指图片一样高。您仍然可以通过巧妙地使用背景来使轨道看起来不是完整的高度。以下是一个例子。

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">

- Woodrow Barlow