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

Question

我有一个自定义样式输入范围，我希望高度为 0 以支持我的样式 -> 我的想法是没有任何内置样式，这样我就可以根据顶部包含的单独跨度元素样式显示我的 slider ，所以要使 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" />

Answer 1

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

我在这 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

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