跟踪容器上的刻度。 HTML5滑块

Question

我正在尝试从滑轨上消除这些美学上令人不快的“问题”。

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（由Microsoft建议） 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中进行内联，都没有区别，并且行仍然存在。我只能使用inspect元素将其删除。

请你帮我一下：S

编辑： 看来Internet Explorer在我的末尾附加了一个全新的html文件！如何编辑此样式？

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

Answer 1

使用以下CSS修复了该问题：

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