Диапазон ввода - высота 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" />

css google-chrome firefox input safari

01.05.2018 21:39

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

114

Ответы 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

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

01.05.2018 22:45

Другие вопросы по теме

Разделите загруженный файл на несколько частей с помощью javascript

Безголовый кукловод Google Chrome получает DOM страницы

Отключить автозаполнение хромированного адреса

Документ автоматически масштабируется, когда я уменьшаю размер окна, но не когда я устанавливаю порт мобильного просмотра

Chrome печатает флажки PDF ПРОВЕРЕННО, даже если они не отмечены на экране

Google Chrome / macOS: поле пароля не принимает символы, отличные от ASCII

Что такое статус в хоме

Я хочу выполнить функцию ng-click через консоль, возможно ли это?

Chrome проверяет элемент двумя строками вместо двух столбцов

Rails 5 (рабочая версия) и Devise - невозможно войти в Chrome или Safari, но можно войти в Firefox

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

Ответы 1

Другие вопросы по теме

Похожие вопросы