Стилізація checkbox

37

Від автора: вітаю вас, друзі. Створюючи форми на сайті, ми неодноразово працюємо з таким елементом форми, як checkbox, який дозволяє відзначити галочкою якийсь пункт форми. За замовчуванням чекбокс виглядає досить буденно, однак є можливість його оформити. Давайте подивимося, як можна стилізувати checkbox і оформити його вельми привабливим чином.

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

Отже, перед нами є проста форма авторизації, в якій є поле checkbox для запам’ятовування користувача (код форми ви знайдете в исходниках).

Ми отримали стандартний чекбокс. Давайте спробуємо змінити його вигляд. Для цього скористаємося плагіном Bootstrap-checkbox. Скачаємо і встановимо плагін, підключивши файл bootstrap-checkbox.min.js:

Для ініціалізації плагіна досить викликати його метод checkboxpicker() для конкретного чекбокса або для всіх чекбоксов в коді. Давайте викличемо для чекбокса з конкретним ідентифікатором:

$(function(){
$(‘#remember’).checkboxpicker();
});

Розмітка чекбокса при цьому повинна бути приблизно наступної:

Запам’ятати?

Поміщати чекбокс в тег label не рекомендується. Ось що ми отримаємо в результаті:

Оригінальний перемикач замість однотипного чекбокса, чи не так? Ну а за допомогою опцій, які можна передати в метод плагіна, ми маємо можливість зробити стилізацію перемикача checkbox. Наприклад, рядки No і Yes ми можемо замінити на іконки:

$(function(){
$(‘#remember’).checkboxpicker({
html: true,
offLabel: ‘‘,
onLabel: ‘
});
});

Або більш відповідні іконки:

$(function(){
$(‘#remember’).checkboxpicker({
html: true,
offLabel: ‘‘,
onLabel: ‘
});
});

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