Лого www.SiteHere.ru

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

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

Раньше я рассматривал как можно придать стили выпадающему списку. Сегодня же расскажу как можно красиво оформить чекбоксы и радиокнопки. Уже есть несколько готовых решений и вам лишь нужно выбрать тот, который больше всего вам нравится. Эти элементы можно сделать действительно красивыми и необычными на своём сайте. Только не переусердствуйте и выбирайте стиль так, чтобы он подходили под цветовую схему всего сайта.

Небольшой пример использования красной цветовой схемы и стиля Flat для чекбоксов и радиокнопок:

Посмотреть примерСкачать

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

HTML часть

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

Для начала нам нужна библиотека jQuery(качаем отсюда) и плагин iCheck со стилями(здесь). Затем подключаем между тегами <head> </head>:

1
2
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  
<script src="js/icheck.min.js" type="text/javascript"></script>

Обратите внимание что сначала идет плагин jQuery, а только потом сам плагин iCheck.

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

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

1
<link href="skins/flat/red.css" rel="stylesheet">

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<form action="./">  
    <div>
        <label>
            <span>Вариант 1</span>
            <input type="checkbox">
        </label>
    </div>
 
    <div>
        <label>
            <span>Вариант 2</span>
            <input type="checkbox" checked>
        </label>
    </div>
 
    <div>
        <label>
            <span>Вариант 3</span>
            <input type="radio" name="iCheck">
        </label>
    </div>
 
    <div>
        <label>
            <span>Вариант 4</span>
            <input type="radio" name="iCheck" checked>
        </label>
    </div>
</form>

jQuery часть

Осталось привязать к нашим элементам эти стили. Следующий код сам определяет нужные элементы на странице:

1
2
3
4
5
6
7
8
9
<script>
$(document).ready(function(){
     $('input').iCheck({
          checkboxClass: 'icheckbox_flat-red',
          radioClass: 'iradio_flat-red',
          increaseArea: '20%'
     });
});
</script>

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

Вывод

Мы рассмотрели как можно красиво и легко сделать оригинальный дизайн для чекбоксов и радиокнопок. Всё что нужно — это подключить скрипт и нужные стили. Если появяться проблемы с установкой стилей — пишите в комментариях! 🙂

Успехов!

С Уважением, Юрий Немец

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • Игорь

    Юрий, спасибо, кнопки действительно с этим плагином смотрятся классно, но никак не могу преодолеть одну закавыку. У меня в одной из форм предусмотрена возможность выбора: если радиокнопка в одном положении, активируются одни поля формы и дезактивируются другие, если выбрано другое значение этой кнопки — первые поля наоборот дезактивируются, а вторые — активируются. Сделано это с помощью нехитрых конструкций типа «#кнопки такой-то click класс полей такой-то attr(‘disabled’,true или false)» (всё это, конечно, обёрнуто функциями). После подключения iCheck конструкция не работает, такое впечатление, что теперь не работает метод click (и другие аналогичные методы). Может подскажете, в чём тут могло бы быть дело?

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *