диапазон ввода - высота 0 работает только в Firefox

Question

У меня есть диапазон ввода нестандартного стиля, и я хочу иметь высоту 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" />

Answer 1

хорошо, я решил проблему! Мы можем предоставить прозрачный фон. Это сделало слайдер кликабельным!

Я нашел отличную статью на эту тему .

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

Надеюсь, этот пост кому-нибудь поможет.