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