时间戳

首页 > 解决方案 > 输入范围 - 高度 0 仅在 Firefox 中有效

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

问题描述

我有一个自定义样式输入范围，我希望高度为 0 来支持我的样式-> 想法是没有任何内置样式，因此我可以根据顶部包含的单独跨度元素样式使我的滑块出现，因此对于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" />

标签： cssgoogle-chromefirefoxinputsafari

解决方案

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

我找到了一篇关于这个主题的优秀文章。

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

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

推荐阅读