Красивый checkbox (чекбокс) - как стилизовать его?

Запись от and_y87 размещена 27.11.2012 в 11:28

Показов 40128 Комментарии 3

Многие задаются вопросом - "Как стилизовать чекбокс (чекбоксы)?"

Работая верстальщиком заметил, что checkbox это одно из излюбленных мест дизайнеров...
безусловно: красивый чекбокс это хоть и малость, но приятная для глаза штука, стандартные мало кому нравятся...

Я бороздил долго и упорно интернет, видел кучу разных плагинов, но получая ценный опыт работы верстальщиком и JS-кодером я пришёл к своему собственному мнению какой он - скрипт для стилизации чекбоксов.

всё просто, что бы стилизовать чекбокс достаточно по факту 14 строк кода на CSS.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.styled_box{
    display: none;
}
.styled_box + label{
    display: inline-block;
}
.styled_box.type1:checked + label {
    background-position: bottom;
}
.styled_box.type1 + label{
    background: url(../images/checkbox1.jpg) top;
    width: 14px;
    height: 14px;
}

Что мы имеем в итоге?

1. мы ставим чекбокс
2. задаём чекбоксу id
3. рядом ставим лэйблл для этого чекбокса
4. далее мы скрываем чекбокс
5. устанавливаем лэйблу фоновую картинку и размеры

вот и всё по сути...

Код в итоге выглядит так:

HTML5
1
2
<input type="checkbox" class="styled_box type1" id="box_id_01">
<label for="box_id_01"></label>

всё... чекбокс стилизован...

Рабочий пример

Мануал (для тех кто только начал учиться)

Вставляем на страницу в место где нужен чекбокс этот код:

HTML5
1
2
<input type="checkbox" class="styled_box type1" id="box_id_01">
<label for="box_id_01"></label>

при добавлении нового чекбокса не забудьте изменить его id и for у тега label 01,02,03,04
вставили код, далее...
В начале странице после тега:</head> закрывающий и перед тегом: <body> открывающий вставьте код, что бы получилось так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</head>
<style>
.styled_box{
    display: none;
}
.styled_box + label{
    display: inline-block;
}
[type=checkbox].styled_box:checked + label {
    background-position: bottom;
}
.styled_box.type1 + label{
    background: url(../images/checkbox.jpg) top;
    width: 14px;
    height: 14px;
}
</style>
<body>

Либо, если у вас есть файл расширения .css (который подключается на всех страницах где вы хотите использовать стилизованые чекбоксы), то в том файле сделайте новую строку и вставте туда код из блока выше.(ту часть что находится между <style> и </style>.)
Далее в папке images размещаем картинку .jpg фармата размерами 14 на 28 где сверху будет вид чекбокса не выделенного а снизу выделенного...
если ваша папка с картинками имеет другое название замените "images" в строке:
background: url(../images/checkbox.jpg) top; на ваше название папки...
background: url(../"Название вашей папки без кавычек"/checkbox.jpg) top;
так же лучше не допускать пробелов в названии папок.

Сделали?
Тогда всё... сохраняйте > проверяйте, и есть вы правильно *= разместили в своём коде мой, то всё заработает...

Хотите больше и умнее читайте дальше

почему type1 ?

В перспективе можно сделать разнообразие чекбоксов расширяя стиль таким образом:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.styled_box.type1 + label{
    background: url(../images/checkbox1.jpg) top;
    width: 14px;
    height: 14px;
}
.styled_box.type2 + label{
    background: url(../images/checkbox2.png) top;
    width: 14px;
    height: 14px;
}
.styled_box.type3 + label{
    background: url(../images/checkbox3.gif) top;
    width: 17px;
    height: 17px;
}

Обратите внимание что type3 имеет уже размеры не 14px а все 17!
полностью код выглядит так:

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.styled_box{
    display: none;
}
.styled_box + label{
    display: inline-block;
}
[type=checkbox].styled_box:checked + label {
    background-position: bottom;
}
.styled_box.type1 + label{
    background: url(../images/checkbox.jpg) top;
    width: 14px;
    height: 14px;
}
.styled_box.type2 + label{
    background: url(../images/wind-body-closer.png) top;
    width: 14px;
    height: 14px;
}
.styled_box.type3 + label{
    background: url(../images/cart-radio.png) top;
    width: 17px;
    height: 17px;
}

так же заменилась одна строка на : [type=checkbox].styled_box:checked + label {
что бы быть универсальной (для одностильных чекбоксов я считаю это не нужно)

Динамика.

Если нет желания возиться с проставлением тэга <label>
То я приготовил плюшку которая сама проставит для вас лэйблы:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function styled_box(){
    $('[type=checkbox]').each(function(i,obj) {
        if( $(obj).hasClass('styled_box') ){
            var par = $(obj).parent();
            if( !$(par).has("label").length ){
                var id =  $(obj).attr('id');
                var label = $('<label>',{ 'for' : id });
                $(obj).after( label );
            }
        }
    });
}
$(document).ready(function(e) { 
    styled_box();
});

Таким образом при загрузке документа скрипт укусит все чекбоксы у которых class = styled_box и обратит их в "гламурные" стилизованные чекбоксики

Так же данную функцию можно запускать при динамическом добавлении строк таблиц. в неё встроил проверку на наличие лэйбла для стилизованных чекбоксов

Может пригодится оО ?
Ну и так... вдруг пригодится...
Задаёте чекбоксу в таблице class "check_all" и при клике по нему(при изменении его состояния), он выделяет все чекбоксы в таблице, ну соответственно либо снимает выделение.

JavaScript
1
2
3
4
5
6
7
8
$('.check_all').live( 'change', function(){
    var target = $(this).parents('table').find('[type=checkbox]');
    if( $(this).is(':checked') ){
        $(target).attr('checked', true);
    }else{
        $(target).attr('checked', false);
    }
});

В чём могут быть косяки и подводные камни.?
Если в ваших стилях что либо будет трогать display у чекбоксов;
Если в ваших стилях что либо будет трогать стили у лэйблов;

Перспективы.
этот абзац для тех кто щарит.
Сразу не додумался, но! Заглядывая в перспективу можно добавить ещё одно правило для :hover.
дабавив при этом в изображение ещё один тип, получая изображение типа ( Обычный, При наведении, Выбранный) и пробивая по правилу = Top, Center, Bottom.

Так же можно сэкономить на количестве запросов к серверу используя спрайты, получая код вида:

CSS
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
.styled_box{
    display: none;
}
.styled_box + label{
    background-position-y: top;
    display: inline-block;
    width: 18px;
    height: 18px;
}
[type=checkbox].styled_box + label:hover {
    background-position-y: center;
    cursor: pointer;
}
[type=checkbox].styled_box:checked + label {
    background-position-y: bottom;
}
.styled_box.type1 + label{
    background: url(../img/checkbox.png) 0px 0px  no-repeat;
}
.styled_box.type2 + label{
    background: url(../img/checkbox.png) -18px 0px  no-repeat;
}
.styled_box.type3 + label{
    background: url(../img/checkbox.png) -36px 0px  no-repeat;
}
.styled_box.type4 + label{
    background: url(../img/checkbox.png) -54px 0px  no-repeat;
}

Минус этого метода в том что возможно использование картинок только равных габаритов (размеров)...
Но в принципе, если за основу взять чекбоксы размерами в 18 пикселей(как в примере) и составлять спрайт, отталкиваясь от размеров этих размеров, тогда всё будет как надо...

Рабочий пример

Размещено в Front-End Разработка, html, CSS, Оптимизация, Разработка Сайтов

« Взгляд в прошлое Главная страница как сделать(создать свою) браузерную онлайн игру »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 3

Комментарии

	Странно, почему нет камментов (
	Запись от and_y87 размещена 21.12.2012 в 11:31

	у меня не вышло=( выложи исходник или скриншот....мне очень хочется увидеть
	Запись от Vedma размещена 21.12.2012 в 12:41

	Эммм.... по сути я тут всё описал максимально понятно, как мог... код открытый тут можно увидеть: http://example.andy87.ru/12/ проинспектировав код
	Запись от and_y87 размещена 21.12.2012 в 17:31

Новые блоги и статьи Все статьи Все блоги /
Жизня: рисунок укладки багажа, сделанный клодом anaschu 21.08.2026 Сделал 15 снимков, он по снимкам сделал схему.	Был там один разговор по поводу свободы в материальном мире. kumehtar 19.08.2026 Суть: рассматривается живое существо, оказавшееся внутри довольно странной системы (этого мира) и пытающееся обустроить в ней свой кусок пространства. Жизнь действительно предъявляет каждому. . .	Когда логика программы не спасает от человеческих ошибок Maks 18.08.2026 В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .	Лето уходит kumehtar 17.08.2026
Мысли в слух kumehtar 17.08.2026 Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .	Перемещение строк из ТЧ в другой документ с учетом текущего пробега Maks 17.08.2026 Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .	Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .	Часы электронные Uhbif79 12.08.2026 Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .

Сообщение форума

Отменить изменения