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 Sliders http://imageshack.com/a/img401/9131/dqwb.jpg

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

让我知道它是否有效

Answer 2

Trident（Internet Explorer＆＃39;呈现引擎）不允许::ms-thumb伪元素从::ms-track溢出。要解决此问题，您需要轨道至少与拇指图像一样高。您仍然可以将轨道设置为 apear ，就好像它不是全高，巧妙地使用背景。这是一个例子。

＆＃13;

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

＆＃13;

<input type="range">

＆＃13;

自己的图像作为范围上的滑块拇指。如何在CSS上打造风格

2 个答案: