Css изменить checkbox – Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров

Как изменить checkbox css

Сегодня мы научимся изменять внешний вид наших чекбоксов только с помощью css. Тема это довольно популярная, но в большинстве решений используются jQuery плагины. В принципе, в этом нет необходимости. Сейчас мы в этом убедимся.

Для начала создадим обычный чекбокс (разметка):

Здесь чекбокс и текст для него. Все это обернуто в div. Это сделано специально и нужно! Кстати, кто не знал: for у тега label должен соответствовать нужному id чекбокса, чтобы при клике по тексту выбирался чекбокс.

Теперь перейдем к стилям:

Здесь все мега просто:) Использование псевдоэлемента after и состояние чекбокса :checked позволяет добиться желаемого результата. Логика: скрываем настоящий чекбокс. У описания для нужного чекбокса показываем псевдоэлемент и стилизуем его как угодно. При клике по описанию — чекбоксу присваивается свойство (чекнутый) и мы выражением input[type=checkbox]:checked + label:after меняем вид псевдоэлемента на нужный. Profit!

Оформление элементов формы — это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before стало возможным без дополнительных элементов и скриптов кастомизировать элемент INPUT:CHECKBOX.

В разных браузерах этот элемент будет выглядеть по разному. Chrome, Opera, IE, Yandex и прочие — будут по мере сил и фантазии разработчиков выводить checkbox с собственным оформлением.

Квадрат и галочку нельзя изменить стандартными стилями вроде:

Поэтому стоит задача полностью заменить вывод стандартного элемента на свой, и мы сделаем это, используя только CSS.

План действий такой:

1. Скрываем вывод чек-бокса;
2. Формируем нужный внешний вид чекбокса в псевдо — элементе label:before;
3. Дополнительные стили формируют внешний вид текущего статуса.

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

Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.

Существует 2 типа элементов форм, которые очень трудно стилизовать под себя (особенно задать один стиль для всех платформ) — Windows, OS X, Linux по-своему отображают данные элементы.

HTML код

начнём мы с создания html документа со следующей структурой:

Радио кнопки

Чекбоксы

С html структурой мы закончили. Теперь давайте посмотрим, каким образом мы можем стилизовать элементы . Первым делом возьмёмся за радио элементы. Отображение позаимствуем с дизайна OS:

Стилизуем радиокнопки

В первую очередь, мы меняем иконку курсора на pointer (появляется рука с пальцем), для того чтобы пользователь понимал, что данный элемент кликабилен:

Затем спрячем радио кнопку по её атрибуту:

Заменяем скрытый элемент псевдо классом :before.

Такой же стиль мы применим и к чекбоксу. Разница только в том, что для радио кнопки нам нужно сформировать окружность. Добиться подобного эффекта мы можем, воспользовавшись border-radius и задав радиус в половину ширины и высоты элемента.

На данном этапе наши элементы должны выглядеть вот так:

Теперь нам нужно добавить мелкие кружочки в основной круг при клике по кнопке. Для этого воспользуемся псевдо-элементом CSS3 :checked, и в качестве контента запишем HTML символ круга • •, но для того чтобы всё отображалось так, как нам нужно, данное значение нужно преобразовать для CSS. Для этого можем воспользоваться сервисом Entity Conversion Tool

Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.

Стилизуем чекбоксы

Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:

Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента :before, просто добавим рамку:

Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ ? ✓.

В итоге, вот что у нас должно получиться:

Итоги

В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим jQuery плагином.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/css3-checkbox-radio/
Перевел: Станислав Протасевич
Урок создан: 8 Марта 2013
Просмотров: 158711
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Переключатель стилей на чистом CSS с помощью :checked

От автора: еще пару лет назад разработчики уже могли создавать множество проектов с помощью одного лишь CSS без применения JavaScript. Но сегодня CSS настолько окреп, что можно писать поистине удивительные вещи без единой строки JavaScripta’а. Скорее всего вы уже читали статьи на тему «способы на чистом CSS», в которых демонстрируется мощь каскадных таблиц стилей.

Когда дело касается чисто CSS методов, мы не можем игнорировать псевдокласс :checked, его я и буду использовать в этой статье. Конечно, я не первый, кто пишет об этом способе, уже велись довольно обширные споры по поводу использования элементов формы в качестве замены JavaScript’у. К примеру, статья с Adobe Louis Lazaris и это замечательное слайд шоу от Ryan Seddon.

Применение :checked

Если коротко, то :checked применяется к любой радиокнопке или чекбоксу и обозначает состояние выбранного элемента. Пользователь может изменить состояние элементов, поставив галочку на другой чекбокс или выбрав другую радиокнопку.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

А теперь можно продолжать.

Создание блока настроек

В демо вы должны были заметить иконку шестеренки и то, как при нажатии на нее появляется блок с параметрами. Перед пояснением того, какой HTML и CSS код лежит за этим, взглянем на следующий код:

/* нам не нужно, чтобы input’ы были видны, нужны только лейблы */ input[type=»checkbox»], input[type=»radio»] { position: absolute; visibility: hidden; } .settings-box-element { z-index: 10; }

/* нам не нужно, чтобы input’ы были видны, нужны только лейблы */ input[type=»checkbox»], input[type=»radio»] {   position: absolute;   visibility: hidden; }   .settings-box-element {   z-index: 10; }

Поскольку нам необходимо отображать только лейблы, то код выше как раз и прячет чекбоксы и радиокнопки. Более того, всем лейблам присвоен класс settings-box-element со свойством z-index , нам нужно, чтобы эти поля всегда оставались поверх страницы.

Теперь мы можем разобраться в коде блока настроек. Начнем с кнопки-шестеренки. Ее код:

HTML

<!—иконка шестеренки, открывает блок при клике на нее —> <input type=»checkbox»> <label for=»settings-btn»></label>

<!—иконка шестеренки, открывает блок при клике на нее —> <input type=»checkbox»> <label for=»settings-btn»></label>

CSS

.settings-btn + label { position: fixed; top: 130px; right: 0; display: block; width: 35px; color: #e83737; text-align: center; background: #fff; cursor: pointer; }

.settings-btn + label {   position: fixed;   top: 130px;   right: 0;   display: block;   width: 35px;   color: #e83737;       text-align: center;   background: #fff;   cursor: pointer; }

Если вы читали хоть одну или даже две статьи о том, как использовать элементы формы, чтобы не применять JavaScript, то вы уже знаете, что нужно использовать input’ы вместе с лейблами. А значит, если хоть один удалить, то ничего не сработает. У нас есть чекбокс с id=»settings-btn» и лейбл с атрибутом for, указывающим на значение id. Также я добавил класс settings-btn, чтобы использовать его потом.

В CSS лейбл спозиционирован фиксировано position: fixed с соответствующими значениями top и right. Следом идет белый бокс, якобы содержащий кнопки:

HTML

<!—белый бокс, содержащий кнопки —> <div></div>

<!—белый бокс, содержащий кнопки —> <div></div>

CSS

.buttons-wrapper { position: fixed; top: 130px; right: -200px; /* должно совпадать со значением ширины */ width: 200px; height: 240px; background: #fff; }

.buttons-wrapper {   position: fixed;   top: 130px;   right: -200px; /* должно совпадать со значением ширины */   width: 200px;   height: 240px;   background: #fff; }

Наш бокс это пустой DIV с классами «buttons-wrapper» и «settings-box-element». Как я уже говорил выше, последний класс в основном используется для добавления z-index. «buttons-wrapper» нужен чтобы стилизовать сам DIV. И, как вы можете заметить, боксу задана ширина в 200px и высота в 240px. Это чтобы вместились 5 кнопок, можете посмотреть демо. Также задано позиционирование fixed и соответствующие значения right top. Единственное, что стоит отметить, что значение свойства right должно совпадать с шириной блока, но с отрицательным значением (чтобы блок исчез из поля зрения).

Теперь взглянем на код оставшихся 5 кнопок. В комментариях указан фон, к которому относится кнопка:

<!—стили фона —> <!—светлый фон (#eaeaea) —> <input type=»radio» name=»layout» checked> <label for=»light-layout»> Light Background</label> <!—темный фон (#494949) —> <input type=»radio» name=»layout»> <label for=»dark-layout»> Dark Background </label> <!—фон-изображение —> <input type=»radio» name=»layout»> <label for=»image-layout»> Image Background</label> <!— фон-шаблон —> <input type=»radio» name=»layout»> <label for=»pattern-layout»> Pattern Background</label> <!— показать/спрятать контент—> <input type=»checkbox»> <label for=»hide-show-content»> Hide/Show content</label>

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

<!—стили фона —> <!—светлый фон (#eaeaea) —> <input type=»radio» name=»layout» checked> <label for=»light-layout»> Light Background</label>   <!—темный фон (#494949) —> <input type=»radio» name=»layout»> <label for=»dark-layout»> Dark Background </label>   <!—фон-изображение —> <input type=»radio» name=»layout»> <label for=»image-layout»> Image Background</label>   <!— фон-шаблон —>     <input type=»radio» name=»layout»> <label for=»pattern-layout»> Pattern Background</label>   <!— показать/спрятать контент—> <input type=»checkbox»> <label for=»hide-show-content»> Hide/Show content</label>

.layout-buttons { display: block; width: 150px; padding: 10px 0; text-align: center; border: 2px solid black; box-sizing: border-box; font-size: 0.875em; cursor: pointer; } .light-layout + label { position: fixed; top: 140px; right: -150px; } .dark-layout + label { position: fixed; top: 185px; right: -150px; } .image-layout + label { position: fixed; top: 230px; right: -150px; } .pattern-layout + label { position: fixed; top: 275px; right: -150px; } .hide-show-content + label { position: fixed; top: 320px; right: -150px; }

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 30 31 32 33 34 35 36 37 38 39 40

.layout-buttons {   display: block;   width: 150px;   padding: 10px 0;   text-align: center;   border: 2px solid black;   box-sizing: border-box;   font-size: 0.875em;   cursor: pointer; }   .light-layout + label {   position: fixed;   top: 140px;   right: -150px; }   .dark-layout + label {   position: fixed;   top: 185px;   right: -150px; }   .image-layout + label {   position: fixed;   top: 230px;   right: -150px; }   .pattern-layout + label {   position: fixed;   top: 275px;   right: -150px; }   .hide-show-content + label {   position: fixed;   top: 320px;   right: -150px; }

Обратите внимание на то, что первый чекбокс уже отмечен атрибутом «checked». Мы используем его по умолчанию.
Каждый инпут имеет свой id, а каждый лейбл свой for, и они совпадают между собой. И вы можете знать, а может и нет, но весь секрет с атрибутом for в том, что, если мы его используем, то при клике на лейбл с атрибутом for автоматически выбирается чекбокс или радиокнопка. Вот почему мы можем использовать псевдокласс :checked.

Всем лейблам присвоен класс «layout-buttons». Он используется для добавления базовых и общих стилей, как ширина, padding, border и т.д. Другие классы используются для индивидуальной стилизации. Как вы могли заметить, для иконки шестеренки и для белого бокса используется фиксированное позиционирование с определенными значениями top и right. А значение top для каждого лейбла больше на 45px, чем у предыдущего; это нужно, чтобы кнопки стали в столбец, не налегая друг на друга. Также обратите внимание на то, что значение right равняется ширине кнопок, только с отрицательным значением.

Осталась последняя часть CSS кода:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

input[type=»radio»]:checked + label { background: #e83737; color: #fff; border-color: #e83737; }

input[type=»radio»]:checked + label {   background: #e83737;   color: #fff;   border-color: #e83737; }

Эти стили используются для замены стилей по умолчанию для лейблов с выбранными радиокнопками (у нас их 4). Я использовал смежные селекторы, чтобы определить из всех инпутов радиокнопки. Свойствам присвоено значение #e83737, цвет #fff.

Ничего сверх сложного. Оставшиеся элементы обернуты DIV’ом.

<div> <div> <h2>Cool stuff with CSS only!</h2> <p>Lorem ipsum dolor sit amet…</p> </div> </div>

<div>   <div>     <h2>Cool stuff with CSS only!</h2>     <p>Lorem ipsum dolor sit amet…</p>   </div> </div>

В коде выше я позиционирую каждый элемент блока настроек независимо друг от друга, так что я могу запросто обернуть каждый отдельным DIV’ом и позиционировать их как угодно, сильно упрощает работу. Мы поступили так просто потому, что мы не можем выбрать родительски элемент, только смежный.

Итак, основной контент обернут в div с классом class=»main-wrapper». И, как вы увидите позже, чтобы изменить стили этого DIV’а, нам нужно будет написать что-то похожее:

input[type=»checkbox»]:checked ~ main-wrapper { /* стили */ }

input[type=»checkbox»]:checked ~ main-wrapper {   /* стили */ }

Чтобы выбрать главный DIV мы используем селектор ~.

Клик по иконке настроек

По клику должен появляться блок настроек. Код ниже позволяет это сделать:

.settings-btn:checked + label { right: 200px; /* совпадает с шириной .buttons-wrapper */ } .settings-btn:checked ~ .buttons-wrapper { right: 0; } .settings-btn:checked ~ .layout-buttons { right: 30px; }

.settings-btn:checked + label {   right: 200px; /* совпадает с шириной .buttons-wrapper */ }   .settings-btn:checked ~ .buttons-wrapper {   right: 0; }   .settings-btn:checked ~ .layout-buttons {   right: 30px; }

Когда пользователь кликает на иконку настроек, будет выбран чекбокс с id=»settings-btn». После нажатия происходит следующее:

Селектор смежных элементов (+) заставляет лэйблы выезжать на 200px после того, как будут выбраны чекбоксы.

Селектор ~ заставляет выезжать элементы с классами «buttons-wrapper» и «layout-buttons» до значений 0 и 30px соответственно из правого края.

Оба селектора в нашем примере незаменимы, и без них ничего бы не работало.

Замена фона

Я напомню вам HTML радио кнопок:

<!—стили фона —> <!—светлый фон (#eaeaea) —> <input type=»radio» name=»layout» checked> <label for=»light-layout»> Light Background</label> <!—и еще 3 радио кнопки/лейбла —>

<!—стили фона —> <!—светлый фон (#eaeaea) —> <input type=»radio» name=»layout» checked> <label for=»light-layout»> Light Background</label> <!—и еще 3 радио кнопки/лейбла —>

Мы будем менять фон у элемента .main-wrapper. CSS код:

.light-layout:checked ~ .main-wrapper { background: #eaeaea; } .dark-layout:checked ~ .main-wrapper { background: #494949; } .image-layout:checked ~ .main-wrapper { background: url(image url) no-repeat center 0 fixed; } .pattern-layout:checked ~ .main-wrapper { background: url(images/pattern1.png) repeat; }

.light-layout:checked ~ .main-wrapper {   background: #eaeaea; } .dark-layout:checked ~ .main-wrapper {   background: #494949; } .image-layout:checked ~ .main-wrapper {   background: url(image url) no-repeat center 0 fixed; } .pattern-layout:checked ~ .main-wrapper {   background: url(images/pattern1.png) repeat; }

По HTML коду мы имеем 4 набора инпутов типа type=»radio» и 4 лейбла. По клику на любой лейбл будет выбран связанный с ним инпут, а значит сработает псевдокласс :checked. Затем в зависимости от выбранного лейбла будет применен один из четырех стилей к блоку-обертке.

Прячем/показываем контент

Я использую чекбокс для отображения и скрытия контента:

<!— показать/скрыть контент —> <input type=»checkbox»> <label for=»hide-show-content»> Hide/Show content</label>

<!— показать/скрыть контент —> <input type=»checkbox»> <label for=»hide-show-content»> Hide/Show content</label>

.hide-show-content:checked ~ .main-wrapper .content { display: none; }

.hide-show-content:checked ~ .main-wrapper .content {   display: none; }

В этом случае, когда пользователь кликает на соответствующий лейбл, тем самым выбирая чекбокс, мы даем браузеру команду выбрать элемент с классом class=»content» и установить значение display: none.

Заключение

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

Автор: Omar Wraikat

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Кастомное оформление checkbox и radio кнопок средствами CSS

Знакомство с checkbox и radio

Для раскрытия основной темы этой статьи в первую очередь следует раскрыть понятие checkbox и radio для понимания того, с чем нам надо будет столкнуться при кастомизации.

Checkbox – составляющая часть интерфейса веб-ресурса, вывод которой осуществляется графическим методом. Существует два возможных состояния элемента: выбрано (означает согласие с указанным тезисом или подтверждает предпочтение пользователя к указанному объекту) и не выбрано (передает не согласие и не желание взаимодействия человека с указанными параметрами).

Область взаимодействия пользователя и checkbox традиционно представляется в виде пустого квадрата. При выборе указанного параметра (средством выбора является клик мышкой по активной зоне) квадратик заполняется определенным маркером. Классический вариант этого маркера – галочка. Около флажка указывается информация для выбора, в ее качестве может выступать текст, реже – картинка.

Radio — составляющая часть интерфейса веб-ресурса, которая передает выбор пользователя одного значения из общего множества предложенных вариантов.

По сути функционал radio не отличается от checkbox. Единственным и главным отличием этих элементов является то, что checkbox позволяет выбрать несколько параметров одновременно из списка предложенных, а radio допускает отмечать только один вариант.

Процесс кастомизации

Суть кастомизации заключается в преобразовании указанного оформления под свой уникальный стиль. Для не опытных верстальщиков этот процесс вызывает множество вопросов и трудностей. Однако сегодня мы покажем, как грамотно переоформить элементы выбора checkbox и radio без использования Java-script кода.

Необходимость в использовании кастомизации переключателей и флажков вызвана с одной стороны особенностями работы браузеров, которые по умолчанию отображают эти элементы по разному, в соответствии со своими стандартными настройкам. Пример отображение одного и того же кода в Chrome и FireFox представлен ниже.

До кастомизации

После кастомизации

С другой стороны это используется для создания единства стиля сайта, приведения всего оформления ресурса к общему знаменателю.

Пример переработки стандартного оформления в необходимый Вам вид рассмотрен ниже.

HTML

<input type="checkbox" />
<label for="test-check1">Чекбокс 1:</label>

CSS

input[type=checkbox] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
label {
   cursor: pointer;
}
label:after {
   content: " ";
   display: inline-block;
   width: 17px;
   height: 17px;
   background: url(img/checkbox-2.png);
   position: relative;
   top: 3px;
	margin-left: 15px;
}
input[type=checkbox]:checked + label:after {
   background-position: 0 -17px;
}
label:hover:after {
   background-position: 0 -34px;
}
input[type=checkbox]:checked + label:hover:after {
   background-position: 0 -51px;
}

В каких браузерах работает?

9.0+	1.0+	11.6+	5.0+	4.0+	4.0+	?

Для остальных версий браузера кастомизация без Java-script кода и дефолтных полей считается невозможным.

Оценок: 6 (средняя 5 из 5)

• 4205 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Подмена стандартных input[type=checkbox] и input[type=radio] без JS / Sandbox / Habr

Приходилось часто задумываться, каким образом лучше всего организовать подмену стандартных input[type=checkbox] и input[type=radio] не используя JavaScript.
Понятно, что нет ничего проще, чем сделать toggleClass на jQuery и подогнать CSS, но все же…

Лично я пришел к варианту, описанному ниже. Вот хочу поделиться.

Начнем с HTML:

<div>
	<input type="checkbox" />
	<label for="checkBox01">Label for checkbox</label>
</div>

Контейнер «input-check» служит для того, чтобы вертикально отцентрировать checkbox.

Также понадобится спрайт (в моём случае 14px*28px) с новым, красивым checkbox’ом.

Далее CSS:

.input-check {
  display: inline-block;
  *display: inline; /* inline-block ie7 fix */
  *zoom: 1;
  vertical-align: top;
  position: relative;
  cursor: pointer;
}
.input-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -7px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
}
.input-check label {
  font-size: 14px;
  line-height: 22px;
  display: block;
  padding-left: 20px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.input-check label:before {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: rgba(0, 0, 0, 0) url(../images/checkbox.gif) no-repeat;
  z-index: 5;
  content: '';
}
.input-check input:checked + label:before {
  background-position: 0 -14px;
}

Главная особенность способа, что checkbox не скрывается полностью, а он продолжает висеть на своем месте (над картинкой) просто напросто полностью прозрачный. В тоже время браузеры не поддерживающие opacity отображают стандартный checkbox без потери функционала.

По функционалу 100% соответствие стандартному checkbox — Вы кликаете непосредственно на сам checkbox, либо на label ссылающийся на него.

В строчке

background: rgba(0, 0, 0, 0) url(../images/checkbox.gif) no-repeat;

указание прозрачного цвета rgba(0, 0, 0, 0) позволяет не отображать картинку нового checkbox в IE8 (IE8 не поддерживает псевдокласс :checked).

Следовательно в браузерах, которые не поддерживают :before и :checked (IE7-8) вполне прилично на том же месте отображается стандартный checkbox.

То же самое можно проделать и для input[type=radio].

Демонстрация

Картинка вместо чекбокса | htmlbook.ru

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

Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса — когда он включен и выключен (рис. 1).

Рис. 1. Вверху чекбокс выключен, внизу он включен

Желательно объединить две картинки в одну в графическом редакторе, сделать из них так называемый CSS-спрайт. Дело в том, что первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.

HTML

После того, как спрайт сделан, перейдём к HTML-коду. Он содержит три важных элемента.

<label><input type="checkbox" value="1" name="k"><span></span></label>

Первый это тег <label>, он создаёт вокруг чекбокса невидимую рамку, щелчок внутри которой включает или выключает галочку в чекбоксе. Его наличие позволяет не щёлкать непосредственно по чекбоксу, размеры которого довольно малы, а щёлкать за пределами чекбокса. При этом всё будет работать именно так, как нам и нужно, даже несмотря на то, что по самой галочке мы не попали.

Далее идёт сам чекбокс (<input type=»checkbox»>) со всеми желаемыми параметрами. Здесь никаких ограничений нет, вставляйте в тег любые необходимые атрибуты.

После <input> следует пустой <span>, этот элемент будет выполнять декоративную роль, именно к нему и применяется наш рисунок.

CSS

Для начала определим размер отображаемого рисунка. У меня он составляет 32х26 пикселов. Заметьте, здесь речь идёт не о спрайте, где у нас объединено две картинки, а об одном изображении. Эти размеры подставляем в стиль селектора label.

label {
 width: 32px; /* Ширина рисунка */
 height: 26px; /* Высота рисунка */
 display: block; /* Блочный элемент */
 position: relative; /* Относительное позиционирование */
}

Стиль чекбокса не трогаем, он в любом случае не будет виден и переходим к нашему «декоративному» <span>. Важно сделать чтобы элемент занимал всю доступную область внутри <label>. Для этого задаём абсолютное позиционирование и устанавливаем ширину и высоту как 100% от родителя. Заодно смещаем элемент в левый верхний угол.

input[type="checkbox"] + span {
 position: absolute; /* Абсолютное позиционирование */
 left: 0; top: 0;
 width: 100%; height: 100%;
 background: url(images/switch.png) no-repeat; /* Фоновый рисунок */
 cursor: pointer; /* Курсор в виде руки */
}

Картинка добавляется как фон, здесь никаких сюрпризов нет, и меняем для разнообразия форму курсора.

На этом этапе наш чекбокс уже превратился в симпатичную картинку, осталось только задать смену рисунка, когда внутри чекбокса стоит галочка. Для этого воспользуемся псевдоклассом :checked, он срабатывает при установке галочки в поле. Правда тут есть одна хитрость. :checked применяется к чекбоксу, а менять его стиль необходимости нет, нас интересует только «декоративный» span. Поэтому используем соседние селекторы и добавляем стиль к span идущему после чекбокса с галочкой.

input[type="checkbox"]:checked + span  	{
 background-position: 0 -26px;
}

Надеюсь, теперь стало понятно такое положение <span> в HTML-коде, как раз для того, чтобы его легко стилизовать с помощью псевдокласса :checked.

Собираем код воедино (пример 1) и тестируем его в браузерах.

Пример 1. Картинка вместо чекбокса

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатель</title>
  <style>
   label {
    width: 32px;
    height: 26px;
    display: block;
    position: relative;
   }
   input[type="checkbox"] + span {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(images/switch.png) no-repeat;
    cursor: pointer;
   }
   input[type="checkbox"]:checked + span {
    background-position: 0 -26px; 
   }
  </style>
 </head>
 <body>
  <form>
   <label><input type="checkbox" value="1" name="k"><span></span></label>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Браузеры

Все современные версии браузеров — Firefox, Chrome, IE9, Opera, Safari показали одинаковый рабочий результат.

Также код не будет работать в IE8, эта версия не понимает :checked. Давайте сделаем поддержку старых версий IE, для чего вернём настройки элементов формы по умолчанию. Для начала к элементам желательно добавить классы и в стилях обращаться именно к ним. Так мы сможем задать стиль любого элемента без обращения к псевдоклассам CSS3.

<label><input type="checkbox" value="1" name="k"><span></span></label>

Чтобы в стилях затронуть версии IE младше 9.0 воспользуемся условными комментариями. В стилях остаётся задать ширину и высоту для label по умолчанию и скрыть span (пример 2).

Пример 2. Стиль для IE8

<!--[if lt IE 9]>
 <style>
  label.switch {width: auto; height: auto; }
  span.switch { display: none !important; }
 </style>
<![endif]-->

Данный код надо вставить сразу после закрывающего тега </style> в примере 1. Таким образом мы получим классический вид чекбоксов в IE7-8 и меняющуюся картинку в современных браузерах.