Стилізація select

37

Від автора: вітаю вас, друзі. У цій статті ми спробуємо з вами змінити нудне оформлення списку select у формах і оформити select по своєму смаку. Отже, давайте подивимося, як же відбувається стилізація select.

Вихідні файли поточної статті ви можете завантажити за посиланням.

У попередній статті ми з вами створили два простих списку select: список країн і список років. Виглядають вони досить непогано:

Однак хтось може захотіти стилізувати select під дизайн свого сайту. Для стилізації select і, відповідно, елементів списку option ми використовуємо плагін bootstrap-select. Насправді подібних плагінів безліч і bootstrap-select — одне з багатьох рішень.

Завантажити плагін та підключимо необхідні файли: bootstrap-select.min.css і bootstrap-select/dist/js/bootstrap-select.min.js.

Для того, щоб плагін працював з випадаючим списком, тег select необхідний клас selectpicker. Власне, цього вже достатньо для того, щоб для select та option був використаний css плагіна.

Як бачимо, список змінився і виглядає дуже непогано. Дуже чудово виглядає робота плагіна для списку multiple, при якому можна вибрати декілька варіантів:

Також ми можемо задавати налаштування select в нашому коді JS, використовуючи опції плагіна. Давайте спробуємо. Встановимо для другого списку клас selectpicker2 і використовуємо новий клас для ініціалізації плагіна в коді JS:

$(function(){
$(‘.selectpicker2’).selectpicker({
style: ‘btn-info’,
size: 10
});
});

Тут ми задаємо стиль поля та розмір випадаючого списку. Ось що отримали в результаті:

Ну а на цьому поточну статтю ми завершуємо. Додатково по роботі з формами ви можете подивитися цей урок. Удачі!