Кроссбраузерное оформлення для HMTL5 елемента input з типом range

12

Від автора: Повзунок вибору діапазону (range) є одним з нових типів у елемента input, представлених у специфікації HTML5. Цей тип дозволяє здійснити вибір якогось числового значення у вказаному діапазоні. Браузерами передбачено відображення даного типу у вигляді слайдера з повзунком. Це дуже інтуїтивний елемент користувацького інтерфейсу, який дуже часто зустрічається в додатках. Ми можемо пересувати повзунок вправо або вліво, щоб вибрати потрібне значення в межах заданого діапазону.

Кроссбраузерное оформлення для HMTL5 елемента input з типом range

Кроссбраузерное оформлення для HMTL5 елемента input з типом range

Але, як ви могли помітити, в кожному браузері передбачено своє, трохи відрізняється від інших браузерів, оформлення, яке може не влаштувати деяких дизайнерів і розробників. Тому в цій статті я покажу вам, як створити для даного елемента майже однакове оформлення для всіх браузерів. Отже, якщо ви готові, почнемо.

Рекомендую також прочитати статтю: Створення та оформлення HTML5 індикатора виконання (progress bar)

Для браузерів Chrome, Safari і Opera

Браузери Safari і Opera працюють на «движку» Webkit. І хоча розробники браузера Chrome прийняли рішення перейти на власний «движок» Blink, на даний момент у цих браузерів багато спільного.

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

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;
}

На цьому прикладі видно, що тільки повзунок (handlebar) залишився незайманим у результаті вказівки стилів.

Кроссбраузерное оформлення для HMTL5 елемента input з типом range

Щоб і до нього теж можна було застосовувати стилі, нам необхідно використовувати псевдо-елемент ::-webkit-slider-thumb, наявний тільки у Webkit, і точно також видалити вихідні стилі з допомогою властивості -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;
}

Таким способом ми можемо стилізувати елемент input з типом range для браузерів на «движку» Webkit. Стилі, які ми прописали, повинні працювати для браузерів Chrome і Safari, а також для останньої версії Opera. Однак, вони не матимуть жодного ефекту в браузерах Firefox і Internet Explorer, т. к. у них інші «движки». Але ми знаємо, що потрібно робити, щоб виправити цю ситуацію.

Для браузера Firefox

Спроба прописати стилі прямо для селектора input[type=’range’] виявиться невдалою у випадку з Firefox. Замість цього нам необхідно використовувати псевдо-елементи ::-moz-range-track і ::-moz-range-thumb, характерні тільки для 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.

Кроссбраузерное оформлення для HMTL5 елемента input з типом range

Для браузера Internet Explorer

Internet Explorer відображає елемент input з типом range далеко не так, як всі інші браузери. Щоб було легше зрозуміти, я намалював діаграму, що показує з яких частин формується елемент input даного типу.

Кроссбраузерное оформлення для HMTL5 елемента input з типом range

(Прим. пер.: lower fill – нижня заливка, tick – позначка, handle bar – повзунок, upper fill – верхня заливка)

IE також відображає спливаючу підказку (tooltip), що відображає встановлюється значення під час переміщення повзунка.

Кроссбраузерное оформлення для HMTL5 елемента input з типом range

Кожну з цих частин елемента input ми можемо оформити за допомогою псевдо-елементів ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks і ::-ms-tooltip, наявних тільки в IE. Тут ми будемо використовувати ті ж стилі, як і для браузера Firefox браузерів на «движку» Webkit.

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;
}

Але в результаті вийде не те, що ми очікували побачити. Відмітки буде видно, а от верх і низ повзунка – ні.

Ми легко можемо прибрати позначки, додавши для елемента input параметр step=»any». Проте, зробити повзунок повністю видимим не представляється можливим. Це, як якщо б для елемента input було задано властивість overflow зі значенням hidden, але це не можна було б виправити, змінивши значення властивості overflow на visible. Я до сих пір намагаюся з’ясувати, чому так відбувається. Якщо вам вдалося вирішити цю проблему, поділіться, будь ласка, своїм рішенням в коментарях.

Кроссбраузерное оформлення для HMTL5 елемента input з типом range

Висновок

На закінчення хотілося б сказати, що елемент input з типом range — це досить добре змінний елемент. На жаль, кожен браузер прагне відобразити його по-своєму, тому нам доводиться писати більше коду, щоб це виправити. Я сподіваюся, що в майбутньому з’явиться стандарт, який згладить дані відмінності. Я також даю посилання на демо-приклад повзунка вибору діапазону, створеного в даній статті, та посилання на джерело.