—»     —»   Как стилизовать слайдер диапазона на HTML5 для всех браузеров
  Раздел: Подсказки   Нет комментариев  

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



Поле ввода диапазона (range) – это один из новейших элементов ввода, представленный в HTML5. Этот тип ввода позволяет нам вводить число, находящееся в определенном диапазоне. Браузеры, однако, по умолчанию будут рендерить этот тип ввода в виде слайдера. Это очень удобный интерфейс, который можно часто видеть в приложениях. Мы можем перемещать ползунок вправо и влево, и выставлять таким образом определенное число.

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

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

В Chrome, Safari и Opera

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

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

input[type=range] {
-webkit-appearance: none
}

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

.input[type=range] {
-webkit-appearance: none;
width: 100%;
border-radius: 8px;
height: 7px;
border: 1px solid #bdc3c7;
background-color: #fff;
}

Как можно видеть ниже, ползунок – это единственная часть поля ввода, которая не была подвержена изменениям от вышеприведенного кода.

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

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

input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}

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

В Firefox

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

.firefox input[type=range]::-moz-range-track {
border-radius: 8px;
height: 7px;
border: 1px solid #bdc3c7;
background-color: #fff;
}
.firefox input[type=range]::-moz-range-thumb {
background: #ecf0f1;
border: 1px solid #bdc3c7;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}

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

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

В Internet Explorer

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

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

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

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

Каждый элемент этого ввода можно оформить посредством соответствующего IE псевдо-элемента ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-tick и ::-ms-tooltip. Здесь мы также применяем те же стили, как и в Webkit и Firefox.

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
background: transparent;
}
input[type="range"]::-ms-track {
border-radius: 8px;
height: 7px;
border: 1px solid #bdc3c7;
background-color: #fff;
}
input[type="range"]::-ms-thumb {
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}

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

Мы можем без труда убрать отметки, добавив step=”any” в элемент ввода. Однако вряд ли мы сможем сделать рукоятку полностью видимой. Так как параметр overflow у элемента ввода выставлен на hidden, и эту проблему нельзя решить просто выставив overflow на visible. Причину этого мы пытаемся выяснить до сих пор. Если вам удастся решить этот вопрос, пожалуйста, поделитесь с нами в комментариях.

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

В завершение

Элемент ввода range позволяет изменять и внешний вид. К сожалению, каждый браузер по-своему интерпретирует вводимые вами стили, и поэтому вам скорее всего придется использовать больший объем кода. Мы надеемся, что вскоре появится какой-то строгий стандарт для всех. Наконец, предлагаем вам ссылку, по которой вы сможете увидеть этот пример в действии.

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, CSS
Опубликовал Design FactoRy   Прочитано (раз): 3904   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728