火狐浏览器输入问题。怎么修？

Question

默认情况下，Firefox 中的滑块显示为灰色。据我了解，Firefox不接受很多css标签，例如input[type=range]::-webkit-slider-thumb，例如，我尝试在现有的CSS中添加moz-range-thumb标签，就像我设法做到了一样，但仍然是背景滑块是白色的，这仅在 Firefox 中。

更改后的样子：

还有我的css代码：

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
}

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

input[type=range]:focus::-webkit-slider-runnable-track {
    background: linear-gradient(
    90deg
    ,#29bddd,#923ddd),#c4c4c4;
}

input[type=range]:focus::-ms-fill-lower {
    background: linear-gradient(
    90deg
    ,#29bddd,#923ddd),#c4c4c4;
}

input[type=range]:focus::-ms-fill-upper {
    background: linear-gradient(
    90deg
    ,#29bddd,#923ddd),#c4c4c4;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: linear-gradient(
            90deg
            ,#29bddd,#923ddd),#c4c4c4;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

input[type=range]::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    border: 1px solid #2497e3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
}

input[type=range]::-moz-range-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    border: 1px solid #2497e3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: linear-gradient(
            90deg
            ,#29bddd,#923ddd),#c4c4c4;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

input[type=range]:-moz-focusring {
    outline: none;
}

input[type=range]:focus::-moz-range-track {
    background: linear-gradient(
            90deg
            ,#29bddd,#923ddd),#c4c4c4;
}

如何在 Firefox 浏览器中移除此白色背景？

Answer 1

除了为input[type=range] 添加background。 您可以将height = 0 设置为input[type=range]。

body{
  background:gray;
}
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height:0;
    /* background:none; */
}

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

input[type=range]:focus::-webkit-slider-runnable-track {
    background: linear-gradient(
    90deg
    ,#29bddd,#923ddd),#c4c4c4;
}

input[type=range]:focus::-ms-fill-lower {
    background: linear-gradient(
    90deg
    ,#29bddd,#923ddd),#c4c4c4;
}

input[type=range]:focus::-ms-fill-upper {
    background: linear-gradient(
    90deg
    ,#29bddd,#923ddd),#c4c4c4;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: linear-gradient(
            90deg
            ,#29bddd,#923ddd),#c4c4c4;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

input[type=range]::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    border: 1px solid #2497e3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
}

input[type=range]::-moz-range-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    border: 1px solid #2497e3;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: linear-gradient(
            90deg
            ,#29bddd,#923ddd),#c4c4c4;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

input[type=range]:-moz-focusring {
    outline: none;
}

input[type=range]:focus::-moz-range-track {
    background: linear-gradient(
            90deg
            ,#29bddd,#923ddd),#c4c4c4;
}

<input type="range">

Answer 2

您应该将background 设置为input[type=range]。

这是一个简化的例子：

input[type=range] {
    -webkit-appearance: none;
    width: 500px;
    height: 20px;
    background: pink;
}
/* Firefox */
input[type=range]::-moz-range-thumb {
    background: blue;
}
input[type=range]::-moz-range-track {
    background: purple;
}
/* Chrome */
input[type=range]::-webkit-slider-thumb {
    background: blue;
    margin-top: -5px;
}
input[type=range]::-webkit-slider-runnable-track {
    background: purple;
    height: 5px;
}

<input type="range"  />