Question

我想使滑块轨道对于范围输入而不是拇指透明。 CSS看起来像什么？

input[type=range] {
  -webkit-appearance: none;
}

<div style="background-image: linear-gradient(red, yellow);">
  <input type="range" />
</div>

Answer 1

没有可靠的跨浏览器方法来执行此操作。由于您的身体背景为黑色，因此在这些示例中，您也可以将输入的背景设置为黑色。

在Firefox中，您可以使用非标准的::-moz-range-track伪元素：

input[type=range]::-moz-range-track {
    background: transparent;
}

input[type=range] {
    background: black;
}

<div style="background: black;">
    <input type="range">
</div>

在基于Chrome的浏览器中，例如Chrome，Opera，Brave和Edge（以及当前支持Firefox的-webkit-供应商前缀）的Firefox中，您只需通过-webkit-appearance隐藏输入：

input[type=range] {
    -webkit-appearance: none;
    background: black;
}

<div style="background: black">
    <input type="range">
</div>

在IE11和Edge中，滑块用作可填充的仪表，因此您必须使用两种样式来隐藏轨迹本身和：::-ms-track和::-ms-fill-lower ：

input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: transparent;
}

<input type="range">

IE11却不喜欢在黑色背景下播放。

Answer 2

尝试一下：

input[type=range] {
   background: #00000000;
}

应该解决

如何使用CSS

2 个答案: