html - 去除 input[range] 内线

Question

我想删除范围输入(HTML5 视频控件)的内线。有什么办法吗？

Have a Look!

Answer 1

如果这只是一个 HTML <video>元素，那么你将在如何处理它的样式方面受到相当的限制。这些元素的外观因浏览器而异，如下所示:

火狐

谷歌浏览器

Internet Explorer

边缘

这些样式非常困难，有时无法覆盖(尤其是在任何一种一致的方式下)，因为它们依赖于特定于浏览器的样式，如下所示:

audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
    -webkit-appearance: media-slider;
    display: flex;
    height: 8px;
    background-color: transparent;
    min-width: 25px;
    color: inherit;
    flex: 1 1 auto;
    margin: 0px 15px 0px 0px;
    padding: 0px;
    border: initial;
}

或专门针对范围部分:

input[type="range" i] {
    color: rgb(196, 196, 196);
}

您可以尝试使用一种会显式覆盖它的样式，但您的成功可能会有所不同:

input[type="range" i] {
    /* Attempt to hide this */
    color: transparent!important; 
}

如果您正在寻找类似的东西，您可能最好使用基于 Javascript 的 JPlayer。或 MediaElement.js