Красивые чекбоксы css. Как сделать в css оформление checkbox-ов
Если вам требуется изменить внешний вид 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, ведь в разметке он валяется, как "мусорный" тег.
Поэтому можно немного улучшить данный способ и полностью отказаться от "мусорного" тега, заменив его псевдоэлементом. Если вам интересно, как это сделать, то пожалуйста, поставьте лайк к данной статье или напишите комментарий, тогда я обязательно выпущу продолжение и опишу процесс более подробно.
Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.
Input:checked + label:before { content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; }
Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.
Стилизуем чекбоксы
Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:
Input { display: none; }
Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента:before, просто добавим рамку:
Checkbox label:before { border-radius: 3px; }
Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ? ✓.
Input:checked + label:before { content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center; line-height: 15px; }
В итоге, вот что у нас должно получиться:
Итоги
В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим
Иногда, когда мы смотрим на радиокнопки или 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, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.
Input:checked + label:before { content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; }
Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.
Стилизуем чекбоксы
Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:
Input { display: none; }
Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента:before, просто добавим рамку:
Checkbox label:before { border-radius: 3px; }
Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ? ✓.
Input:checked + label:before { content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center; line-height: 15px; }
В итоге, вот что у нас должно получиться:
Итоги
В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали 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. Пишите в комментарии, если что-то непонятно.
