javascript - 轨道容器上的蜱虫。 HTML5 slider

Question

我正试图从我的 slider 轨道中删除这些不美观的“滴答声”。

https://i.imgur.com/3NAVBOy.png

这是它在 chrome 和 firefox 中的显示方式以及我希望它在资源管理器中的显示方式:

https://i.imgur.com/wLgSveV.png

我的 HTML:

<input type="range" min="0" max="100" value="55" class="slider" id="myRange">

我尝试的 CSS(微软建议的) https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-ticks-after

input[type="range"]::-ms-ticks-before,
input[type="range"]::-ms-ticks-after {
  display: none;
}

我注意到 IE 浏览器创建的元素#ticks_on_track_container 负责这些“刻度”/线。当我检查元素并编写如下样式规则时:

#ticks_on_track_container {
  display: none;
}

它起作用了，线条消失了!但是当我这样做时，无论是在我的 HTML 下还是在我的 main.css 中内联，都没有区别，并且这些行仍然存在。我只能使用检查元素删除它们。

你能帮帮我吗:S

编辑:看起来 Internet Explorer 将一个全新的 html 文件附加到我的末尾!？我该如何编辑它的样式？

https://i.imgur.com/syIRbEo.png

Answer 1

使用以下 css 修复它:

.slider::-ms-track {
  color: transparent;
}