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

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

Показов 40040 Комментарии 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

Новые блоги и статьи Все статьи Все блоги /
FSharp: interface of module DevAlt 16.05.2026 Интерфейс модуля F# позволяет управлять доступностью членов, содержащихся в реализации модуля. По-умолчанию все члены модуля доступны: module Foo let x = 10 let boo () = printfn "boo" . . .	Хитросплетение родственных связей пантеона греческих богов. russiannick 14.05.2026 Однооконник, позволяющий узреть и изучить отдельных героев древней Греции. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible". . .	[golang] Угол между стрелками часов alhaos 12.05.2026 По заданным значениям часа и минуты необходимо определить значение меньшего угла между стрелками аналогового циферблата часов. import "math" func angleClock(hour int, minutes int) float64 { . . .	Debian 13: Установка Lazarus QT5 ВитГо 09.05.2026 Эта инструкция моя компиляция инструкций volvo https:/ / www. cyberforum. ru/ blogs/ 203668/ 10753. html и его же старой инструкции по установке Lazarus с gtk2. . .
Нейросеть на алгоритме "эстафета хвоста" как перспектива. Hrethgir 06.05.2026 На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .	Асинхронный приём данных из COM-порта Argus19 01.05.2026 Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .	попытка написать игровой сервер на C++ pyirrlicht 29.04.2026 попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .	Контроль уникальности выбранного документа-основания при изменении реквизита Maks 28.04.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .

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

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