В уроці ми займемося створенням таких красивих чекбоксів: Кликни по мені!
Зазвичай при верстці форм для елементів checkbox і radiobutton створюються ще й ярлики label. Ярлики спрощують виділення потрібних чекбоксів і радіокнопок. Погляньте самі.
результат:
Я без ярлика.
А я з ярликом. Кликни на мене.
Як бачите, клік по ярлику виділяє відповідний чекбокс.
Візьмемо дві картинки: UnCheck.png Check.png
Тепер з ярликом виконаємо такий трюк: спочатку, зробимо у нього зліва відступ padding розміром з цю картинку. Потім поставимо цю картинку в якості фону і заборонимо зображенні повторюватися. В результаті вона буде відмалювати на відступі один раз і під текстом ярлика з'являтися не буде.
Результат застосування стилів:
Кликни на мене!
Як бачимо, потрібна нам картинка додалася. Але вона не змінюється. Це ми зараз і поправимо. Додамо новий клас стилів, який буде описувати зазначений прапорець.
І підключимо невеликий код на JQuery