Кастомизация чекбоксов. Стилизуем чекбоксы и радиокнопки с CSS3
Приветствую вас на своем блоге, уважаемые читатели, интересующиеся сайтостроением. Сегодня я покажу вам классный прием, который позволит создавать классные чекбоксы, гораздо более красивые, чем те, что предлагает html по умолчанию. Я покажу, как делается в css оформление checkbox -ов. Иными словами, я покажу вам, как сделать на css красивые чекбоксы (checkbox), то есть галочки.
Начальная разметка
Итак, начать нужно с того, чтобы добавить в html код, который выведет наши чекбоксы, а также подписи к ним (label), эти поля нужно связать между собой, чтобы при клике на label можно было устанавливать галочку в поле.
Так, я немного прокомментирую. У нас есть три пары: поле checkbox и подпись к нему. Каждое поле получает свой идентификатор, связка с лейблом происходит с помощью атрибута for , где прописывается имя идентификатора, с которым нужно связать. Пока на странице все выглядит так, то есть это обычный внешний вид чекбоксов. Сейчас мы будем его изменять.
Убираем input, оформляем спаны
Итак, теперь нам надо скрыть со страницы обычные чекбоксы.
Input { display:none; }
Теперь нужно как-то оформить новые поля. Оформлять мы будем элементы span, так как они находятся внутри label .
Input + label span{ display:inline-block; width:40px; margin-right: 10px; height:40px; vertical-align:middle; border: 5px solid green; cursor:pointer; border-radius: 5px; }
Этим селектором мы выбрали все спаны в лейблах, которые находятся в коде сразу за input ами с типом checkbox . Таким образом, оформление применится к нашим спанам. Мы даем им блочно-строчный тип, определенную ширину и высоту, отступ справа, чтобы текст не прилегал вплотную.
Для оформления я добавил толстую зеленую рамку и закругление углов в 5 пикселей. Также добавим стиль для курсора — при наведении на спаны он должен меняться с обычного вида на указывающий перст.
Делаем так, чтобы все заработало
Теперь нужно сделать так, чтобы при клике внутри спана, то есть при выборе какого-то варианта, в него автоматом ставилась галочка. Для этого я для начала нашел в интернете соответствующую иконку с галочкой (она должна быть в формате png), уменьшил ее до размеров нашего поля. Теперь остается вставить такой код:
Input:checked + label span{ background:url(btn.png) no-repeat; }
Все, теперь работает! Попробуйте пощелкать и вы увидите, что при выборе появляется красивая галочка. Моя картинка лежала в той же папке, что и файл css и называлась btn.png , отсюда и такая запись.
Ну а что же делает наш волшебный селектор input:checked + label span ? По сути, он приказывает браузеру следующее: когда любой из чекбоксов будет отмечен, примени для спанов в лейблах фоновую картинку. Вот так вот все просто, мы обошлись без скриптов, сделав красивые чекбоксы на чистом css. Пишите в комментарии, если что-то непонятно.
Если вам требуется изменить внешний вид checkbox или radio-кнопок без использования JavaScript, то данная статья это то что вам нужно.
Итак, поехали...
Для начала стилизуем checkbox, для этого нам потребуется создать следующую HTML-разметку
Стилизуем checkbox
HTML
Вся разметка у нас состоит из трех основных элементов, а именно:
.checkbox
- реальный чекбокс input
.checkbox-custom
- этот элемент я называю - кастомный чекбокс. Ему мы и будем менять внешний вид и позиционировать, как стилизованный чекбокс, ведь реальный чекбокс будет скрыт
.label
- текст лейбла, который будет выводится справа от чекбокса
Все эти элементы должны быть обязательно обернуты в тег label , иначе ничего работать не будет.
Кстати, если вам требуется, чтобы по умолчанию, чекбокс был отмечен, то в нашей HTML разметке, для реального чекбокса задайте атрибут checked
CSS
Теперь добавляем CSS стили.
/* Скрываем реальный чекбокс */ .checkbox { display: none; } /* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */ .checkbox-custom { position: relative; /* Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */ width: 20px; /* Обязательно задаем ширину */ height: 20px; /* Обязательно задаем высоту */ border: 2px solid #ccc; border-radius: 3px; } /* Кастомный чекбокс и лейбл центрируем по вертикали. Если вам это не требуется, то вы можете убрать свойство vertical-align: middle из данного правила, но свойство display: inline-block обязательно должно быть */ .checkbox-custom, .label { display: inline-block; vertical-align: middle; } /* Если реальный чекбокс у нас отмечен, то тогда добавляем данный признак и к нашему кастомному чекбоксу */ .checkbox:checked + .checkbox-custom::before { content: ""; /* Добавляем наш псевдоэлемент */ display: block; /* Делаем его блочным элементом */ position: absolute; /* Позиционируем его абсолютным образом */ /* Задаем расстояние от верхней, правой, нижней и левой границы */ top: 2px; right: 2px; bottom: 2px; left: 2px; background: #413548; /* Добавляем фон. Если требуется, можете поставить сюда картинку в виде "галочки", которая будет символизировать, что чекбокс отмечен */ border-radius: 2px; }
Если вы базово знаете CSS, то разобраться в данных стилях не составит труда.
Но а для тех, кто еще только учится, я постараюсь объяснить, что именно мы делаем данным CSS кодом.
1. Мы скрываем наш реальный чекбокс. Это мы делаем из-за того, что сам по себе чекбокс нельзя кроссбраузерно стилизовать на чистом CSS. Поэтому мы применяем небольшую уловку, реальный чекбокс скрываем, а кастомный чекбокс (напомню, что это элемент с классом.checkbox-custom), стилизуем так, как нам нужно.
Ввиду того, что наш реальный и кастомный чекбоксы были обернуты в тег label , то теперь если пользователь кликнет по кастомному чекбоксу, тем самым он отметит и наш реальный чекбокс, который скрыт. Таким образом, у нас устанавливается прямая взаимосвязь между реальным и кастомным чекбоксами.
2. Задаем внешний вид для нашего кастомного чекбокса. Ко всем важным свойствам я дал комментарии в приведенном выше CSS, поэтому не буду здесь останавливаться.
3. Это пожалуй самое интересное. Я думаю вы обратили внимание на селектор.checkbox:checked + .checkbox-custom::before
Он задает следующее
Если наш реальный чекбокс отмечен (за этим следит селектор.checkbox:checked), то тогда внутрь нашего кастомного чекбокса мы добавляем псевдоэлемент (за это отвечает.checkbox-custom::before). Данный псевдоэлемент выводится, как квадратик внутри нашего кастомного чекбокса. По данному квадратику мы и можем понять, отмечен чекбокс или нет. Разумеется данный квадратик вы сможете поменять на все что угодно, например на привычную всем "галочку". В данном вопросе CSS нас ничем не ограничивает.
И также мы видим, что селекторы.checkbox:checked и.checkbox-custom::before соединены знаком "+", с его помощью мы по сути задаем отношение, что если реальный чекбокс отмечен, то только лишь в этом случае мы должны добавить псевдоэлемент внутрь кастомного чекбокса, в противном же случае ничего делать не нужно.
Стилизуем radio-кнопки
Процесс стилизации radio-кнопок, аналогичен чекбоксам.
Создаем привычную нам разметку (в данном случае отличаются только названия некоторых классов)
HTML
CSS
Checkbox, .radio { display: none; } .checkbox-custom, .radio-custom { width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 3px; position: relative; } .checkbox-custom, .radio-custom, .label { display: inline-block; vertical-align: middle; } .checkbox:checked + .checkbox-custom::before, .radio:checked + .radio-custom::before { content: ""; display: block; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; background: #413548; border-radius: 2px; } .radio-custom, .radio:checked + .radio-custom::before { border-radius: 50%; }
Теперь у нас на странице будут нормально работать, как checkbox, так и radio-кнопки.
Как видите, способ достаточно удобный, не требует использования JS и при этом нормально будет реагировать на стандартное поведение формы, например на ее сброс.
Единственный недостаток данного способа - это то, что нам приходится создавать некий пустой элемент.checkbox-custom для чекбоксов и.radio-custom для radio-кнопок. Который внутри себя не содержит никакого смысла с точки зрения HTML, ведь в разметке он валяется, как "мусорный" тег.
Поэтому можно немного улучшить данный способ и полностью отказаться от "мусорного" тега, заменив его псевдоэлементом. Если вам интересно, как это сделать, то пожалуйста, поставьте лайк к данной статье или напишите комментарий, тогда я обязательно выпущу продолжение и опишу процесс более подробно.
a! Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажу как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3 !
То что получилось посмотрите и опробуйте на демо-странице или скачайте исходники:
HTML разметка
Расположим элементы на странице:
Здесь ничего особенного, каждому элементу задаем id и name , также используем label для описания элементов «переключателя» и «флажка». Внутрь тега label , вставляем span . Для чего именно, написано ниже.
Правила CSS
Сейчас начинается самое интересное. Разберем создание только элемента «флажок», «переключатель» формируется аналогичным путем. Первое что мы делаем, это скрываем стандартный флажок из виду:
input[
type=
"checkbox"
]
{
|
Теперь, становится ясно, для чего нужен элемент span . Вместо скрытого стандартного флажка организуем новый, используя span :
1 | input[
type=
"checkbox"
]
+
label span {
|
С помощью CSS селектора выбираем все span
внутри тега label
, которые принадлежат элементам input
с типом checkbox
(т.е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):
Для выбранных span задаем высоту и ширину в 19px , и располагаем фоновое изображение.
Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked ). Для этого просто смещаем данное изображение влево на 19px :
input[
type=
"checkbox"
]
:
checked
+
label span {
|
Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px и немного изменятся css селектор, вместо type=»checkbox» используется type=»radio» .
Иногда, когда мы смотрим на радиокнопки или input type checkbox , то у нас возникают неприятные ощущения. Кажется, что они выглядят ужасно. Но пока не посыпалась нецензурные слова, я попытаюсь избавить вас от этого чувства.
Сегодня мы будем работать только с кодом. Для начала сформируем его структуру:
//Radio //Checkbox
Если эта кнопка покажется вам некрасивой, не беспокойтесь. Так и должно быть, потому что все остальное мы сделаем при помощи CSS .
Первое что нужно сделать, это скрыть элемент, который генерирует саму некрасивую кнопку – тэг input . Мы все равно сможем нажимать ее, даже несмотря на то, что она скрыта. Как? Вложив input type checkbox в label .
Теперь, когда все стандартные и некрасивые переключатели скрыты, пришло время заняться созданием собственных, красивеньких.
Радиокнопка
Но сильно с оформлением не разгуляешься, так как остальные переключатели тоже должны работать корректно. Давайте просто слегка приукрасим их:
label input { display: none; } label input ~ span { position: relative; display: inline-block; padding: 3px 0 3px 25px; } label input ~ span:before { content: ""; position: absolute; display: block; width: 18px; height: 18px; background: #fff; margin-right: 5px; border: 1px solid #ccc; border-radius: 50%; left: 0; top: 0; box-sizing: border-box; transition: all 300ms ease-in-out; } label input:checked ~ span:before { border: 5px solid #29d; }
На данный момент наша радиокнопка будет выглядеть следующим образом:
Гораздо привлекательней, не так ли?
Чекбокс (флажок)
Давайте начнем с простого HTML input type checkbox . Сейчас я хочу превратить переключатель, который вы видите на скриншоте, в нечто подобное:
label.spin input { display: none; /*hides ugly toggle*/ } label.spin input ~ span { position: relative; display: inline-block; padding: 3px 0 3px 25px; /*adds spacing on the left*/ } /*create our new toggle*/ label.spin input ~ span:before { content: "2713"; /*add a new check mark*/ text-align: center; font-size: 13px; position: absolute; display: block; width: 18px; height: 18px; background: #fff; color: #fff; margin-right: 5px; border: 1px solid #ccc; border-radius: 50%; left: 0; top: 0; box-sizing: border-box; transition: all 500ms ease-in-out; } /*if checked do this*/ label.spin input:checked ~ span:before { transform: rotatez(360deg); background: #29d; border-color: #29d; }
Действительно красивый переключатель!
Наверняка вы видели input type checkbox , в которых тумблер скользит слева направо при нажатии. Такого эффекта можно легко добиться при помощи CSS . Давайте попробуем.
Сначала создадим обычный чекбокс без установленного флажка. Сейчас вы уже знаете, что нам потребуется скрыть стандартный переключатель:
label input { display: none; }
Затем добавьте немного пространства с левой стороны при помощи свойства padding . После этого задайте чекбоксу относительное позиционирование, так как нам нужно, чтобы он содержал в себе и все остальные элементы внутри span :
label input ~ span { position: relative; display: inline-block; padding: 3px 0 3px 35px; }
Перейдем к стилизации CSS input type checkbox при помощи псевдоэлементов :before и :after . Так сгенерированным CSS-кодом будет проще управлять:
label input ~ span:before, label.slide input ~ span:after { content: ""; position: absolute; display: block; width: 18px; height: 18px; background: #fff; margin-right: 5px; border: 1px solid #ccc; left: 0; top: 0; box-sizing: border-box; transition: all 300ms ease-in-out; }
Этот код приведет к появлению элемента, похожего на блок. Так как это свойство установлено для обоих псевдоэлементов, то они будут выглядеть одинаково, и расположены один поверх другого.
Пришло время немного украсить эти псевдоэлементы. :after будет выступать в роли фона, а :before отвечать за переключение ползунка. Давайте отредактируем ширину элемента, чтобы он стал больше. Также не забудьте добавить inset shadow , чтобы он выглядел как бы вдавленным. Кроме этого не забываем про красный фон, который будет интуитивно указывать на “выключенный ” режим:
label input ~ span:before { width: 30px; border-radius: 20px; box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.4), inset 0 -2px 0 -1px rgba(255, 255, 255, 0.2); background: #F22613; }
Что касается :before , то нам нужно сделать так, чтобы элемент стал круглым, а также немного «приподнять » его при помощи эффекта box-shadow :
label.slide input ~ span:after { box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.5); border-radius: 50%; }
Во «включенном » режиме нам нужно сместить ползунок HTML input type checkbox в сторону, и изменить цвет фона с красного на оттенок голубого:
label.slide input:checked ~ span:before { background: #29d; } label.slide input:checked ~ span:after { left: 13px; }
На этом все! Наши красивые чекбоксы и радиокнопки готовы!
Перевод статьи “Styling Radio and Check buttons with CSS ” был подготовлен дружной командой проекта .
Влад Мержевич
Исходные чекбоксы в форме выглядят хотя и привычно, но уже несколько старомодно. Порой хочется вместо чекбокса использовать стильную картинку, которая лучше будет вписываться в существующий дизайн. С помощью CSS3 мы можем это сделать без всяких скриптов, при этом учтём и старые версии браузеров, в которых функционал формы должен сохраниться.
Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса - когда он включен и выключен (рис. 1).
Рис. 1. Вверху чекбокс выключен, внизу он включен
Желательно объединить две картинки в одну в графическом редакторе, сделать из них так называемый CSS-спрайт. Дело в том, что первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.
HTML
После того, как спрайт сделан, перейдём к HTML-коду. Он содержит три важных элемента.
Первый это тег
После следует пустой , этот элемент будет выполнять декоративную роль, именно к нему и применяется наш рисунок.
CSS
Для начала определим размер отображаемого рисунка. У меня он составляет 32х26 пикселов. Заметьте, здесь речь идёт не о спрайте, где у нас объединено две картинки, а об одном изображении. Эти размеры подставляем в стиль селектора label .
Label { width: 32px; /* Ширина рисунка */ height: 26px; /* Высота рисунка */ display: block; /* Блочный элемент */ position: relative; /* Относительное позиционирование */ }
Стиль чекбокса не трогаем, он в любом случае не будет виден и переходим к нашему «декоративному» . Важно сделать чтобы элемент занимал всю доступную область внутри
Input + 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:checked + span { background-position: 0 -26px; }
Надеюсь, теперь стало понятно такое положение в HTML-коде, как раз для того, чтобы его легко стилизовать с помощью псевдокласса :checked
.
Собираем код воедино (пример 1) и тестируем его в браузерах.
Пример 1. Картинка вместо чекбокса
HTML5 CSS3 IE Cr Op Sa Fx
Браузеры
Все современные версии браузеров - Firefox, Chrome, IE9, Opera, Safari показали одинаковый рабочий результат.
Также код не будет работать в IE8, эта версия не понимает :checked . Давайте сделаем поддержку старых версий IE, для чего вернём настройки элементов формы по умолчанию. Для начала к элементам желательно добавить классы и в стилях обращаться именно к ним. Так мы сможем задать стиль любого элемента без обращения к псевдоклассам CSS3.
Чтобы в стилях затронуть версии IE младше 9.0 воспользуемся условными комментариями. В стилях остаётся задать ширину и высоту для label по умолчанию и скрыть span (пример 2).
Пример 2. Стиль для IE8
Данный код надо вставить сразу после закрывающего тега в примере 1. Таким образом мы получим классический вид чекбоксов в IE7-8 и меняющуюся картинку в современных браузерах.