Question

我目前正在为我的公司开发一个需要使用滑块的应用程序。

在Chrome和甚至Edge上查看滑块时，滑块显示应该这样做，但是当我在Firefox上查看滑块时，似乎有一条白线贯穿滑块的中心。

此滑块的当前css代码为：

   #slidecontainer {
       width: 100%;
   }

   .slider {
       -webkit-appearance: none;
       width: 100%;
       height: 25px;
       background: #d3d3d3 ;
       outline: none;
       opacity: 1;
       -webkit-transition: .2s;
       transition: opacity .2s;
       margin-bottom:10px;
       border-radius: 5px;
   }

   .slider:hover {
       opacity: 1;
   }

   .slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
       width: 25px;
       height: 25px;
       background: #989898 ;
       cursor: pointer;
       border-radius: 5px;
   }

   .slider::-moz-range-thumb {
       width: 25px;
       height: 25px;
       background: #DFDFDF ;
       cursor: pointer;
   }

有没有人知道如何解决这个问题？

检查这个js-fiddle：https://jsfiddle.net/rm6qsc1z/

由于

Answer 1

您需要使用非标准的伪元素:: range-track 将其添加到你的小提琴的CSS中：

input[type=range]::-moz-range-track {
  background-color: transparent;
}

Answer 2

我不确定这些年来是否已更改，但已接受的答案不再有效。新的/正确的（经过个人测试的）答案是：

input[type=range]::-moz-focus-outer {
    border: 0;
}

Firefox中的滑块CSS问题

2 个答案: