如何解决CSS input[type=range] 未知/意外的白色背景
我正在构建一个包含滑块的网站,但我看到了一些我无法弄清楚的非常奇怪的行为。在 Firefox 上,似乎有一个我无法摆脱的白色背景。我找不到它的样式,也无法更改它。代码按预期在 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,.5);
}
解决方法
设置为透明时背景消失:
input[type="range"] {
background: transparent;
}
工作示例(在 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,.5);
}
<input type="range" id="costSlider" name="costSlider" min="0" max="1000" step="10">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。