输入范围 - 高度0仅适用于firefox

Posted 2021-03-28

我有一个自定义样式输入范围，我希望高度为0以支持我的风格 - >我的想法是没有任何内置样式，所以我可以根据顶部包含的单独的span元素样式显示我的滑块，所以对于要显示的span元素，我的输入范围自定义样式根本不应该是可见的。

虽然我的想法就像一个魅力，它阻止了点击工作在safari和chrome - 在Firefox上点击仍然正常，高度为0。

有没有办法调整我的输入范围样式，以便我可以实现这一目标？请在下面找到我的输入范围样式：

CSS

input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	margin: 6.8px 0;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 0px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	box-shadow: transparent;
	background: rgba(0, 0, 0, 0);
	border-radius: 0px;
	border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	// background: rgba(13, 13, 13, 0);
	background: rgba(0, 0, 0, 0);
}

html

<input id="scrollbar" class="scrollbar" type="range" min=1 max=24 step="0.01" />

答案

好吧，我解决了这个问题！我们可以提供透明的背景。这使得滑块可以点击！

我在这个topic.上发现了一篇很好的文章

input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	margin: 6.8px 0;
	background: transparent;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 5px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	box-shadow: transparent;
	border-radius: 0px;
	background: transparent; 
	border-color: transparent;
	color: transparent;
}
input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: transparent;
}

<input id="scrubber" class="scrollbar" type="range" min=1 max=24 step="0.01" />

以上是关于输入范围 - 高度0仅适用于firefox的主要内容，如果未能解决你的问题，请参考以下文章

Firefox中忽略的最大高度适用于Chrome和Safari

javascript 函数仅适用于 firefox

css 仅适用于Firefox的CSS

更改表格视图单元格高度仅适用于 iPad

Google HTML 5 Geolocation“使用我的位置”仅适用于 Firefox

scikit-learn joblib 错误：多处理池 self.value 超出“i”格式代码的范围，仅适用于大型 numpy 数组