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

Question

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

我进行了一些研究，并尝试了一些互联网推荐的方法，但不幸的是，没有一个奏效。我尝试使用background、background-color 甚至color 字段来尝试解决我的问题。通过将-webkit-appearance 设置为none，我确保覆盖所有可能阻止我这样做的内容。

这是我的 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>

这是我的 scss 文件中滑块对象的内容：

.slider {
    -webkit-appearance: none;
    height: 1px;
    width: 65%;
    background-color: red;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    cursor: pointer;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
}

.slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #000;
    cursor: pointer;
    border-radius: 50%;
}

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

Answer 1

尝试添加这个：

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

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

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

查看此网站了解更多自定义设置：http://danielstern.ca/range.css