Firefox browser input problem. How to fix?-CodePudding

The

And my css code:

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; }

How i can remove this white background in Firefox browser?

CodePudding user response：

You should just set the background for input[type=range].

Here's a simplified example:

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

CodePudding user response：

In addition to adding background for input[type=range]. you can set height = 0 for 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">