Можливості для стилізації елемента значно покращилися з моменту виходу версії браузера IE10. Тепер стало можливим створювати кросбраузерності повзунки вибору діапазону (слайдери), використовуючи для цього тільки CSS. У цій навчальної статті ми візьмемо стандартний елемент input типу range (Скріншот елемента input з типом range в Mac Chrome 38):
І перетворимо його ось у такий елемент (Оформлення елемента input з типом range за допомогою власних стилів):
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Для того щоб спростити процес написання кросбраузерності стилів, ми скористаємося допомогою препроцесора LESS. CSS стилі також будуть доступні.
Застосування базових CSS стилів
Необхідно застосувати кілька CSS правил, щоб змінити відображення елемента input з типом range у всіх браузерах.
В результаті ми отримаємо невидимі або нестілізованние елементи input type = "range» у всіх браузерах. Тепер ми можемо почати додавання власних стилів.
оформлення повзунка
Невеликий графічний елемент, за яким ви можете клікнути і перетягувати уздовж лінії спектра, називається повзунок. Він піддається оформлення також, як і звичайний HTML елемент.
Зверніть увагу на те, що повторення коду є в даному випадку необхідним, тому що ми не можемо перерахувати ці селектори через кому. Браузери просто проігнорують весь селектор цілком, якщо не зрозуміють хоча б якусь його частину. Результат буде таким: (Стилізований елемент input на невидимій смузі діапазону (WebKit / Blink) або неоформленная смуга діапазону (Firefox і IE))
Оформлення лінії спектра
Лінія, уздовж якої переміщається повзунок, називається смугою діапазону. Вона також піддається оформлення, як і звичайний HTML елемент.
На замітку: браузер Internet Explorer 10+ застосовує трохи інший підхід до подання елементів input type = "range». В IE ви можете визначити абсолютно різні стилі для верхньої (права частина повзунка) і для нижньої (ліва частина повзунка) областей лінії спектра.
А також варто відзначити, що ви можете змінити стилі для стану фокуса, коли користувач взаємодіє з повзунком вибору діапазону.
Цей код дає нам наступний результат (смуга діапазону без повзунка (Chrome) або неоформлений повзунок (Firefox and IE)):
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Створення повноцінного елемента input з типом range
Тепер, коли ми створили окремо повзунок і смугу діапазону, ми можемо скомпонувати CSS стилі разом, щоб отримати повноцінний елемент input з типом range.
Весь CSS код для оформлення елементів input з типом range у всіх браузерах
Далі наведено весь CSS код, необхідний для оформлення елементів input з типом range у всіх браузерах.
Повноцінний елемент input з типом range
Після застосування стилів у нас вийде наступний результат (Елемент input з типом range, створений повністю за допомогою власних стилів.):
Бонус: Весь LESS код для оформлення елементів input з типом range у всіх браузерах
Для створення однакових елементів input з типом range для кожного браузера потрібна велика кількість CSS коду. Використовуючи препроцесор, ми зможете значно підвищити ефективність вашої роботи. Представлений далі LESS код використовується для генерації CSS коду, який ми розглянули до цього.
браузерна підтримка
Сам по собі елемент input type = "range» має наступну браузерную підтримку: Firefox 23+, Safari 4+, iOS 5 +, Chrome 6+, Opera 11+, IE 10+, Android 4.2+. Це досить добре. Застосування власних стилів для оформлення даного елемента не повинно здебільшого змінити дану браузерную підтримку, якщо ви будете слідувати рекомендаціям і коду, написаного в цій навчальної статті.
Ось скріншот демо-приклад. ілюструє відображення елемента input з типом range в сучасних версіях різних браузерів:
Якщо браузер не підтримує елемент input type = "range», у вас буде просто відображатися елемент input type = "text», який буде дійсним і буде працювати.
корисний інструмент
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
