CSS input[type=range] 未知/意外的白色背景

问题描述

我正在构建一个包含滑块的网站，但我看到了一些我无法弄清楚的非常奇怪的行为。在 Firefox 上，似乎有一个我无法摆脱的白色背景。我找不到它的样式，也无法更改它。代码按预期在 chrome 上运行。

Output on Firefox

Output on Chrome

HTML

   <input type="range" id="costSlider" name="costSlider" min="0" max="1000" step="10">

CSS

 input[type="range"] {
     -webkit-appearance: none;
     width: 60%;
     margin-bottom: 20px;
 }
 input[type="range"]:focus {
     outline: none;
 }
 /* Slider Bar */
 input[type="range"]::-webkit-slider-runnable-track {
     height: 6px;
 }
 input[type="range"]::-moz-range-track {
     background: red;
     height: 6px;
 }
 /* Slider Thumb / Circle */
 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     height: 17px;
     width: 17px;
     background: #4fc971;
     margin-top: -5px;
     border-radius: 50%;
 }
 input[type="range"]::-moz-range-thumb {
     height: 17px;
     width: 17px;
     background: #4fc971;
     margin-top: -5px;
     border-radius: 50%;
 }
 input[type="range"]::-webkit-slider-thumb:hover {
     background: #4fc971;
     Box-shadow: 0 0 0 8px rgba(79,201,113,.5); 
 }
 input[type="range"]::-moz-range-thumb:hover {
     background: #4fc971;
     Box-shadow: 0 0 0 8px rgba(79,.5); 
 }

解决方法

设置为透明时背景消失：

input[type="range"] {
    background: transparent;
}

工作示例（在 chrome 中观看）：

body {
  background-color: blue;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 60%;
  margin-bottom: 20px;
  background: transparent;
}

input[type="range"]:focus {
  outline: none;
}


/* Slider Bar */

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
}

input[type="range"]::-moz-range-track {
  background: red;
  height: 6px;
}


/* Slider Thumb / Circle */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 17px;
  width: 17px;
  background: #4fc971;
  margin-top: -5px;
  border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
  height: 17px;
  width: 17px;
  background: #4fc971;
  margin-top: -5px;
  border-radius: 50%;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #4fc971;
  box-shadow: 0 0 0 8px rgba(79,201,113,.5);
}

input[type="range"]::-moz-range-thumb:hover {
  background: #4fc971;
  box-shadow: 0 0 0 8px rgba(79,.5);
}

<input type="range" id="costSlider" name="costSlider" min="0" max="1000" step="10">