css - 输入范围-高度0仅在Firefox中有效

我有一个自定义样式输入范围，并且我希望高度为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" />

**请在chrome和safari上运行以进行测试：D

希望这篇文章对某人有所帮助。