Дизайн для чекбоксів і радіокнопок

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

Невеликий приклад використання червоної колірної схеми і стилю Flat для чекбоксів і радіокнопок:

Подивитися прімерСкачать

Робимо свій дизайн для чекбоксів і радіокнопок

HTML частина

Стилів дуже багато і я лише покажу на прикладі одного (red - як в демо): як його підключити у себе на сайті.

Для початку нам потрібна бібліотека jQuery (качаємо звідси) І плагін iCheck зі стилями (тут). Потім підключаємо між тегами :

12

lt;script src="Http://code.jquery.com/jquery-latest.min.js" type="Text / javascript"gt; lt;/scriptgt;lt;script src="Js / icheck.min.js" type="Text / javascript"gt; lt;/scriptgt;

Зверніть увагу що спочатку йде плагін jQuery, а тільки потім сам плагін iCheck.

Відео: Як стилізувати чекбокси і радіо кнопки

Також необхідно підключити потрібну колірну схему. Всі кольори та стилі можна подивитися тут - iCheck. Також там є опис установки будь-якого стилю, але воно англійською.

Коли скачаєте архів зі скриптом і стилями там буде папка «skins». Я її помістив в папку з файлом index.html і потім між тегами вставив файлик стилів, який буду використовувати (red.css):

Відео: Android Studio 10) Radiogroup, radiobutton y checkbox

1

lt;link href="Skins / flat / red.css" rel="Stylesheet"gt;

Для прикладу я створив кілька елементів:

1234567891011121314151617181920212223242526272829

lt;form action="./"gt;lt;divgt;lt;labelgt;lt;spangt; Варіант 1lt;/spangt;lt;input type="Checkbox"gt;lt;/labelgt;lt;/divgt;lt;divgt;lt;labelgt;lt;spangt; Варіант 2lt;/spangt;lt;input type="Checkbox" checkedgt;lt;/labelgt;lt;/divgt;lt;divgt;lt;labelgt;lt;spangt; Варіант 3lt;/spangt;lt;input type="Radio" name="ICheck"gt;lt;/labelgt;lt;/divgt;lt;divgt;lt;labelgt;lt;spangt; Варіант 4lt;/spangt;lt;input type="Radio" name="ICheck" checkedgt;lt;/labelgt;lt;/divgt;lt;/formgt;

jQuery частина

Залишилося прив`язати до наших елементів ці стилі. Наступний код сам визначає потрібні елементи сторінку:

123456789

lt;scriptgt; $ (document) .ready (function () {$ ( `input`). iCheck ({checkboxClass: `icheckbox_flat-red`, radioClass: `iradio_flat-red`, increaseArea: `20% `}) -}) -lt;/scriptgt;

У кожного прикладу є свій код JS, тому використовуйте цей якщо хочете застосовувати стилі з папки «flat», яка знаходиться в папці «skins».

висновок

Ми розглянули якомога красиво і легко зробити оригінальний дизайн для чекбоксів і радіокнопок. Все що потрібно - це підключити скрипт і потрібні стилі. Якщо з`являться проблеми з установкою стилів - пишіть в коментарях! # 128578;

Успіхів!

З повагою, Юрій Німець