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

Question

默认情况下，Firefox 中的滑块显示为灰色。据我了解，Firefox 不接受许多 css 标签，例如 input[type=range]::-webkit-slider-thumb，例如，我尝试将 moz-range-thumb 标签添加到现有的 CSS，类似我成功了，但是滑块的背景仍然是白色的，而且只有在 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。

这是一个简化的例子：

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"  />

Answer 2

除了为 input[type=range] 添加 background。你可以为 input[type=range].

设置 height = 0

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">

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

Firefox browser input problem. How to fix?

css

firefox

input