CSS input[type=range] Unknown/Unexpected White Background

Question

I am working on building a site that includes a slider and I am seeing some really weird behavior that I cannot figure out. On Firefox, there appears to be a white background that I cannot get rid of. I cannot find where this is being styled nor can I change it. The code is working on chrome as expected.

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, 201, 113, .5); 
 }

Answer 1

The background disappears when you set it to transparent:

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

Working example (watch it in 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, 201, 113, .5);
}

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