Css 范围输入拒绝更改背景颜色和高度

所以我正在为一家电台制作一个网站，遇到了一个问题。我们用于音量的范围输入实际上拒绝更改其背景颜色和高度。为了这个项目的目的，我正在使用SASS（它使之成为一个scss文件类型）

我做了一些研究，并尝试了一些互联网推荐的东西，但不幸的是，没有一个奏效。我已经尝试使用

背景

，

背景颜色

甚至

颜色

字段来解决我的问题。通过将

-webkit外观

设置为

无

，我已确保覆盖所有可能阻止我这样做的内容

这是我的hbs文件中滑块及其父元素的内容：

<div class="rootplayer">
  <div>
    <img class="picture" alt='Artist art' src="{{songart}}" width="170px">
    <div class="playerinfo">
      <p>On air: {{dj}}</p>
      <hr>
      <p>Up next: AJS Show</p>
      <hr>
      <p>Currently playing: {{songTitle}}</p>
      <hr>
      <p>Current Listeners: {{currentListeners}}</p>
    </div>
    <audio controls="" id="player">
      <source src="http://radio.nowhits.uk:8000/radio.mp3" type="audio/mpeg">
    <p>Your browser does not support the audio element.</p>
    </audio>
  </div>
  <div class="playercontrols">
    <i class="fas fa-play" onclick="play()" id="play"></i>
    <i class="fas fa-pause" onclick="pause()" id="pause"></i>
    <input type="range" min="0" max="1" value="0.5" step="0.01" class="slider" id="volume">
    <script src="scripts/volume.js"></script>
    <script src="scripts/playpause.js"></script>
  </div>
</div>

显然，预期的输出应该是红色背景和1px的高度（应该是一条非常细的线），但是我得到了。

尝试添加以下内容：

.slider::-webkit-slider-runnable-track {
  background: red;
}

.slider::-moz-range-track {
  background: red;
}

.slider::-ms-track {
  background: red;
}

---

查看此网站了解更多自定义设置：

您使用哪种浏览器？我在chrome中试用了你的代码，将

高度更改为
1px
，效果非常好。@ItzhakAvraham有趣，我也使用chrome。。。让我们来谈谈您使用了什么，您是否使用了文章中提到的普通css或（节点-）sass？当然，我使用的是scss（您的代码是scss而不是sass，这是有区别的）。如果你使用chrome，它是有线的，因为范围输入看起来与你的附加图片不同。为什么范围调谐器在你的图片中是一个圆圈？这就是原因，我没有在问题中包括这一点，因为这是因为我问的问题没有太大的区别，但现在我们开始（再次查看帖子，我添加了滑块拇指的样式）好的，似乎已经解决了我的问题，我想说的是，在这之后，它的行为真的很奇怪，让我告诉你，它现在正在做什么我不明白为什么你把高度设为0px：它会隐藏轨迹。你期望得到什么样的结果？你能给我一张图吗？我也不知道为什么我把它设为0px，虽然现在是1px，但我现在正在努力摆脱灰色的方块。我尝试了很多方法来摆脱它。。。没有一个有效，以下是我尝试的：
background:transparent；背景颜色：红色
（在所有3种情况下：。滑块，。滑块：：-webkit滑块可运行轨迹，。滑块：：-moz范围轨迹），尝试将所有类型的背景设置为透明，但没有。请注意：范围控制下没有灰色背景。。。