Как оформить слайдер диапазона HTML5 в нескольких браузерах

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

Но, как вы можете видеть выше, каждый браузер отображает этот тип ввода по-своему, что может не подходить для некоторых дизайнеров. Итак, в этой статье мы покажем вам, как оформить его в более унифицированной форме дизайна. Если вы готовы, давайте просто начнем.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

В Chrome, Safari и Opera

Safari и Opera являются браузерами на основе Webkit. Хотя Chrome решил использовать собственный движок Blink, похоже, в настоящее время Chrome все же унаследовал несколько баз кода от веб-сайтов.

Webkit предоставляет простой способ стилизации любого типа ввода, включая диапазон. Для начала мы можем выбрать вход с помощью селектора атрибутов и удалить родные стили Webkit / Chrome, установив -webkit-Appearance в none.

вход[type=range] {
внешний вид: нет
}

На этом этапе мы можем добавить что-нибудь, например, границу, цвет фона, границу округлости и так далее.

.Входной[type=range] {
внешний вид: нет;
ширина: 100%;
радиус границы: 8 пикселей;
высота: 7 пикселей;
граница: 1px solid # bdc3c7;
цвет фона: #fff;
}

Как вы можете видеть ниже, ручка является единственной оставшейся частью ввода, на которую не влияет приведенный выше код.

Чтобы применить к нему стили, мы должны использовать собственный селектор псевдоэлементов Webkit :: – webkit-slider-thumb и аналогичным образом удалить родные стили с помощью -webkit-вести, как показано ниже.

вход[type=’range’]:: – webkit-slider-thumb {
внешний вид: нет;
цвет фона: # ecf0f1;
граница: 1px solid # bdc3c7;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 10 пикселей;
курсор: указатель;
}

И вот как мы стилизуем диапазон типов ввода в браузере Webkit. Стиль, который мы добавили выше, должен действовать в Chrome, Safari, а также в последней версии Opera. Однако это не повлияет на Firefox и Internet Explorer, так как они работают на разных движках. Но у нас есть обходные пути для этих двоих.

В Firefox

Добавление стилей напрямую с помощью селектора атрибутов[type=’range’] не будет изменять собственные стили ввода в Firefox. Вместо этого мы должны использовать собственный селектор псевдоэлементов Firefox :: – moz-range-track и :: – moz-range-thumb.

:: – moz-range-track повлияет на входную дорожку диапазона, в то время как :: – moz-range-thumb повлияет на панель управления вводом.

вход .firefox[type=range]:: – moz-range-track {
радиус границы: 8 пикселей;
высота: 7 пикселей;
граница: 1px solid # bdc3c7;
цвет фона: #fff;
}
вход .firefox[type=range]:: – moz-range-thumb {
фон: # ecf0f1;
граница: 1px solid # bdc3c7;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 10 пикселей;
курсор: указатель;
}

Мы применяем точно такие же стили. Откройте Firefox, и вы должны получить близкий результат, как в браузерах Webkit.

В Internet Explorer

Internet Explorer отображает диапазон типов ввода, сильно отличающийся от остальных. Чтобы сделать это проще, здесь я нарисовал диаграмму, показывающую части, которые формируют вход.

IE также покажет всплывающую подсказку, показывающую номер, которым вы являетесь, когда мы скользим по панели управления.

Каждая из этих входных частей может быть стилизована с помощью собственного псевдоэлемента IE :: – ms-fill-lower, :: – ms-fill-upper, :: – ms-thumb, :: – ms-ticks и :: – мс-подсказка. Здесь мы также применим те же стили, что и в Webkit и Firefox.

вход[type=”range”]:: – мс-фасовочно-низший,
вход[type=”range”]:: – ms-fill-upper {
фон: прозрачный;
}
вход[type=”range”]:: – ms-track {
радиус границы: 8 пикселей;
высота: 7 пикселей;
граница: 1px solid # bdc3c7;
цвет фона: #fff;
}
вход[type=”range”]:: – ms-thumb {
цвет фона: # ecf0f1;
граница: 1px solid # bdc3c7;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 10 пикселей;
курсор: указатель;
}

Но результат не то, что мы ожидали. Пометки видны, а верхняя и нижняя часть панели управления скрыты.

Мы можем легко удалить метки, добавив step = “any” к элементу input. Однако сделать ручку полностью видимой – это то, что невозможно. Это как если бы входной элемент имел переполнение, установленное на скрытое, но его нельзя отменить, просто установив переполнение на видимое. Это то, что я все еще пытаюсь выяснить. Если вы решили эту проблему, вы можете поделиться ею в поле для комментариев ниже.

Последняя мысль

Диапазон типов ввода вполне настраиваемый. К сожалению, у каждого браузера свой путь, и поэтому мы должны писать более длинные коды, чем ожидалось. Я надеюсь, что будет стандарт, который может регулировать этот вопрос в будущем. Наконец, вот ссылка, чтобы увидеть диапазон ввода, который мы показали вам в этой статье.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *