IE＆Edge隐藏框阴影在父div后面

Question

我有输入滑块范围，其中已应用拇指活动box-shadow。在所有浏览器中，阴影都能完美显示，但是当IE＆EDGE时，阴影会在父div（#c）后面剪切/隐藏。

请参见我已将此overflow:visible用于此父级，但在将拇指/指针向左或向右拖动时仍会遮挡阴影/隐藏

#b {
  width: 300px;
  height: 20px;
}
input[type=range]:active::-webkit-slider-thumb {
	box-shadow: 0px 0px 13px 6px #e45685;
}
input[type=range]:active::-ms-thumb {
	box-shadow: 0px 0px 13px 6px #e45685;
}
#c{
  width: 300px;
  height: 32px;
  overflow: visible;
}

<div id="c">
   <input id="b" type="range" min="0" max="10" step="0.1" class="slider-color" >
</div>

即使尝试了position:relative;z-index:999至input[type=range]:active::-ms-thumb，也没有任何反应。谁能帮我

windows 10，IE 11.6xx

Answer 1

我认为基于pseudo selector中的属性选择，我的观点ie无效。您必须使用selection之类的a标记才能应用box-shadow。以下代码在edge, firefox, chrome浏览器中运行良好。评论有关此的更多信息。

#b {
    width: 300px;
    height: 60px;
}

#c {
    width: 300px;
    height: 60px;
    display: block;
    overflow: visible;
}

input[type=range]:active::-moz-range-thumb {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active:-moz-range-track {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-webkit-slider-thumb {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-ms-thumb {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-ms-track {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-ms-fill-lower {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-ms-fill-upper {
    box-shadow: 0px 0px 13px 6px #e45685;
}

<div id="c">
    <input id="b" type="range" min="0" max="10" step="0.1" class="slider-color">
</div>

Answer 2

我希望它能在IE上工作

input[type=range]::-ms-thumb{
   box-shadow: 0px 0px 13px 6px #e45685;
}