我的网站上有一个范围 slider ,它在除 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;}
最佳答案
您使用 :-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 中的行为,不显示 :after
或 :before
在“非内容”HTML 元素上。
, 是正确的。
您可以将输入包装在 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>
关于html - 范围 slider 拇指未在 IE 上显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50907997/