css - 范围输入拒绝改变背景颜色和高度

Question

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

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

这是我的 hbs 文件中 slider 及其父元素的内容:

<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 对象的内容:

.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