我的网络上有一个范围滑块,可以在IE以外的所有浏览器上正常工作。我正在使用背景图像的拇指,但该图像没有在IE上显示,我也使用伪元素来显示起点和终点,这在IE上也是不可见的。这是我的代码
<input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">
input.range-slider__range {
-webkit-appearance: none;
max-width:100%;
height: 2px;
border:1px solid #06C3C3 !important;
outline: none;
padding: 0;
margin: 50px 0;}
input.range-slider__range:before {
content: '';
width: 7px;
height: 7px;
position: relative;
display: block;
top: -3px;
left: -2px;
border-radius: 50%;
background: #06C3C3;}
input.range-slider__range:after {
content: '';
width: 7px;
height: 7px;
position: relative;
display: block;
top: -3px;
left: 2px;
border-radius: 50%;
background: #06C3C3;}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: url("https://dummyimage.com/40/000/fff.jpg");
width: 186px;
height: 49px;
background-repeat: no-repeat;
cursor: pointer;}
.range-slider__range::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
background: url("https://dummyimage.com/40/000/fff.jpg");
width: 186px;
height: 49px;
background-repeat: no-repeat;
cursor: pointer;}
答案 0 :(得分:0)
您使用:-webkit-slider-thumb
和::-moz-range-thumb
,其名称是webkit
浏览器的属性,例如chrome / safari等,moz
属于mozilla firefox
}。
当然,它不会出现在IE上。对于IE,您可以将::-ms-thumb
与ms-track
:after,:before
是pseudo-elements
,用于在元素内容之前插入内容。 input
个元素没有内容。 (就像img
或hr
等)。所以在IE中的行为,不要在'非内容'HTML元素上显示:after
或:before
。
,是正确的。
您可以将输入内容包含在label
中,并将pseudo-elements
添加到其中。
以下示例(针对IE)
input[type=range]::-ms-track {
width: 300px;
height: 5px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
label {
position: Relative;
}
label:after,
label:before {
content: '';
width: 7px;
height: 7px;
position: absolute;
display: block;
top: 0;
border-radius: 50%;
background: #06C3C3;
}
label:before {
left: 2px;
}
label:after {
right: 2px;
}
<label>
<input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">
</label>