::-ms-thumb出现在MS Edge中的轨道后面 [英] ::-ms-thumb appears behind track in MS Edge
问题描述
我已经创建了一个滑块.
I have created a slider.
在chrome中,一切正常.请参见下图:
In chrome everything is working fine.See image below:
但是在MS Edge中,拇指出现在轨道后面.见下图:
But in MS Edge, thumb appears behind track. See image below:
我创建了一个Codepen来解释和显示我的问题: https://codepen.io/glalloue/笔/QGKqNd
I created a codepen to explain and show my problem : https://codepen.io/glalloue/pen/QGKqNd
已应用CSS(更少):
Css(less) applied :
.form input[type=range] {
z-index: 1;
align-self: stretch;
height: 3px;
-webkit-appearance: none;
appearance: none;
border: none;
margin: 0;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border: none;
width: 2.5rem;
height: 2.5rem;
background-color: white;
border-radius: 50%;
box-shadow: inset 0 0 0 1px #cccccc, 0 2px 4px rgba(0, 0, 0, 0.2);
}
&::-ms-thumb {
appearance: none;
border: none;
width: 2.5rem;
height: 2.5rem;
background-color: pink;
border-radius: 50%;
box-shadow: inset 0 0 0 1px #C0C0C0, 0 2px 4px rgba(0, 0, 0, .2);
}
}
这是Internet Explorer的类似问题: ::-ms-thumb出现在轨道后面
建议的解决方案是为::-ms-track增加边距,但没有成功.
Here is a similar question with internet explorer : ::-ms-thumb appears behind track
Suggested solution was to add margin to ::-ms-track but without success.
有什么方法可以使我在MS edge中的::-ms-thumb看起来与在chrome上完全一样吗?
Is there any way to do my ::-ms-thumb in MS edge look exactly the same as it is on chrome?
推荐答案
问题是(间接)输入上的background-image
:
Problem is (indirectly) background-image
on input :
<input name="perimeter" id="perimeter" style="background-image: -webkit-linear-gradient(left, transparent 0%, rgba(164, 223, 253, 0.8) 1%, rgba(164, 223, 253, 0.8) 25%, black 26%, black 100%);" type="range" min="0" max="4" step="1" value="1">
在Chrome和Safari上设置拇指前后的颜色,必须使用background-image
.
This background-image
is necessary to set colors before and after thumb on Chrome and Safari.
要解决问题,我需要在css .form input[type=range]
上设置高度值.
但是,如果我这样做,背景图像将占据所有高度值.
它可以在Chrome上运行,但不能在MS Edge上运行.
To resolve problem, i need to set height value on css .form input[type=range]
.
But if i do it, background-image take all the height value.
It's working on Chrome, but not on MS edge.
因此,要解决此问题,必须使用MS Edge浏览器的特殊性:
So, to resolve it, it's necessary to use MS Edge Browser specificities :
- 删除输入上的
background-image
. - 添加css样式:
-ms-fill-lower
和-ms-fill-upper
来设置拇指之前和之后的颜色
- Remove
background-image
on input. - Add css styles :
-ms-fill-lower
and-ms-fill-upper
to set colors before and after thumb
结果是:
<!-- Android & iOS -->
<input id="perimeter" type="range" min="0" max="4" step="1" style="background-image:-webkit-linear-gradient(left, transparent 0%, rgba(164,223,253,0.8) 1%, rgba(164,223,253,0.8) {{ perimeter *100 / (distances.length -1) | number:0 }}%, black {{ perimeter *100 / (distances.length -1) + 1 | number:0 }}%, black 100%)"/>
<!-- Windows -->
<input id="perimeter" type="range" min="0" max="4" step="1" style="height: 2.5rem;"/>
您需要调节输入显示.如果使用angular,请使用ng-if
仅在android和ios上显示第一个输入,在Windows上显示第二个输入.
You need to condition input display. If you use angular, use ng-if
to display first input only on android and ios, and second on windows.
更少的文件是:
@thumb-color: white;
@thumb-radius: 50%;
@thumb-height: 2.5rem;
@thumb-width: 2.5rem;
@track-width: 100%;
@track-height: 3px;
@track-fill-lower-color: rgba(164,223,253,0.8);
@track-fill-upper-color: black;
.track() {
-webkit-appearance: none;
width: @track-width;
height: @track-height;
cursor: pointer;
}
.thumb() {
-webkit-appearance: none;
border: none;
height: @thumb-height;
width: @thumb-width;
border-radius: @thumb-radius;
background: @thumb-color;
cursor: pointer;
box-shadow: inset 0 0 0 1px grey, 0 2px 4px rgba(0, 0, 0, .2);
}
input[type=range] {
-webkit-appearance: none;
margin: @thumb-height/2 0;
width: @track-width;
&::-webkit-slider-runnable-track {
.track();
border: none;
}
&::-webkit-slider-thumb {
.thumb();
-webkit-appearance: none;
margin-top: -1.25rem; // @thumb-height / 2
}
&::-moz-range-track {
.track();
border: none;
}
&::-moz-range-thumb {
.thumb();
}
&::-ms-track {
.track();
background: transparent;
color: transparent;
}
&::-ms-thumb {
.thumb();
}
&::-ms-fill-lower {
background: @track-fill-lower-color;
}
&::-ms-fill-upper {
background: @track-fill-upper-color;
}
}
这篇关于::-ms-thumb出现在MS Edge中的轨道后面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!