Firefox 与 Chrome 中的不同 CSS 行为 - slider 示例

Question

我在 Stackoverflow 上的第一个问题:) 我有这种情况。 我构建了一个 slider 试图用 js 获取值并显示在一个框中。 此外，我想隐藏 slider 拇指并将其替换为我的图标。在 Chrome 中一切都很好，但在 Firefox 中，slider 的原始拇指仍然被渲染和显示。

任何我认为我在 CSS 中做错了什么？ 提前致谢！

 let slider = document.getElementById("slider_qt"); let selector = document.getElementById("selector"); let SelectValue = document.getElementById("SelectValue"); SelectValue.innerHTML = slider.value; slider_qt.oninput = function () { SelectValue.innerHTML = this.value; selector.style.left = this.value + "%"; };

 .container_quality_tools { width: 100%; margin-top: 20%; }.slider_text { font-size: 10px; margin-bottom: 1%; margin-left: 20px; } #slider_qt { -webkit-appearance: none; width: 100%; margin-left: 3%; margin-right: 0%; height: 7px; outline: none; border-radius: 3px; } #slider_qt::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; cursor: pointer; z-index: 3; position: relative; } #selector { position: absolute; left: 85%; margin-top: -10%; }.SelectorBtn { height: 14px; width: 14px; background-image: url("../media/slider-icon-14.jpg"); background-size: cover; background-position: center; border-radius: 50%; bottom: 0; } #SelectValue { width: 20px; height: 20px; position: absolute; top: -25px; left: -2px; background: #feb360; border-radius: 4px; text-align: center; line-height: 20px; font-size: 8px; font-weight: bold; } #SelectValue::after { content: ""; border-top: 12px solid #feb360; border-left: 10px solid #f1f0f0; border-right: 10px solid #f1f1f1; position: absolute; bottom: -4px; left: 0; z-index: -1; }

 <div class="row no-gutters"> <div class="col-6"> <div class="container_quality_tools"> <p class="slider_text">Quality Tools</p> <input type="range" min="1" max="100" value="90" id="slider_qt"> <div id="selector"> <div class="SelectorBtn"></div> <div id="SelectValue"></div> </div> </div> </div> </div>

铬合金：

Firefox：

Answer 1

使用-moz-range-thumb伪选择器使背景和边框消失。

#slider_qt::-moz-range-thumb {
  background-color: #fff;
  border: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 3;
  position: relative;
}

它在代码段中看起来很糟糕，但我认为它可以在您的代码中使用。

 let slider = document.getElementById("slider_qt"); let selector = document.getElementById("selector"); let SelectValue = document.getElementById("SelectValue"); SelectValue.innerHTML = slider.value; slider_qt.oninput = function() { SelectValue.innerHTML = this.value; selector.style.left = this.value + "%"; };

 .container_quality_tools { width: 100%; margin-top: 20%; }.slider_text { font-size: 10px; margin-bottom: 1%; margin-left: 20px; } #slider_qt { -webkit-appearance: none; width: 100%; margin-left: 3%; margin-right: 0%; height: 7px; outline: none; border-radius: 3px; } #slider_qt::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; cursor: pointer; z-index: 3; position: relative; } #slider_qt::-moz-range-thumb { background-color: #fff; border: 0; width: 30px; height: 30px; cursor: pointer; z-index: 3; position: relative; } #selector { position: absolute; left: 85%; margin-top: -10%; }.SelectorBtn { height: 14px; width: 14px; background-image: url("../media/slider-icon-14.jpg"); background-size: cover; background-position: center; border-radius: 50%; bottom: 0; } #SelectValue { width: 20px; height: 20px; position: absolute; top: -25px; left: -2px; background: #feb360; border-radius: 4px; text-align: center; line-height: 20px; font-size: 8px; font-weight: bold; } #SelectValue::after { content: ""; border-top: 12px solid #feb360; border-left: 10px solid #f1f0f0; border-right: 10px solid #f1f1f1; position: absolute; bottom: -4px; left: 0; z-index: -1; }

 <div class="row no-gutters"> <div class="col-6"> <div class="container_quality_tools"> <p class="slider_text">Quality Tools</p> <input type="range" min="1" max="100" value="90" id="slider_qt"> <div id="selector"> <div class="SelectorBtn"></div> <div id="SelectValue"></div> </div> </div> </div> </div>

Answer 2

```最后我能这样解决！ 谢谢大家支持！ ``

#slider_qt::-moz-range-thumb {
  -webkit-appearance: none;
  background: transparent;
  border-color: transparent;
  color: transparent;
  width: 20px;
  height: 20px;
  cursor: pointer;
}