Question

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

我已经进行了一些研究，并尝试了Internet推荐的一些方法，但是不幸的是，没有任何方法起作用。我尝试使用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

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

1 个答案: