Стилизация checkbox


Содержание материала:

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 532b4e2d9e139021 • Your IP : 91.105.232.77 • Performance & security by Cloudflare

84 Checkboxes CSS

84 free HTML and CSS custom checkbox examples: with image, with label, checked, etc. Update of May 2020 collection. 10 new items.

Related Articles

Author

  • Andreas Storm
  • February 6, 2020

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Lock Checkbox

Lock — pure CSS micro interaction made with HTML checkbox and SVG.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Andreas Storm
  • February 9, 2020

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Flip Checkbox

Flip checkbox in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • @mandycodestoo
  • December 2, 2020

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Checkbox

Pure CSS animated checkbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Adam Quinlan
  • October 18, 2020

Links

Made with

About the code

Chippy Checkbox Inputs

I had occasion to create a field of checkboxes recently for a form and thought I would try to have a little fun with the styling.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Aaron Iker
  • September 20, 2020

Links

Made with

  • HTML / CSS (SCSS)

About the code

Toggle Checkbox Animation

Toggle check button. Sweet animation, smooth and right speed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Jon Kantner
  • September 4, 2020

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Pencil and Paper Checkboxes

A checkbox concept that simulates filling checkboxes and erasing checks in real life.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Jase
  • August 23, 2020

Links

Made with

About the code

Fancy Checkboxes and Radio Buttons

It’s been decades — checkboxes and radio buttons still look terrible and don’t play well without some love. Starting with well-formed HTML, look what we can do with a bit of style and some Font Awesome glyphs.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Simon Goellner
  • July 25, 2020

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Cardboard Check Box

A checkbox made to look like a cardboard box, opens up on check to reveal a tick using 3D CSS transforms.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Author

  • Stas Melnikov
  • July 18, 2020

Links

Made with

About the code

Pure CSS Checkboxes

I’ve used nested span elements for creating an animation of square turn and creating an arrow animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Jouan Marcel
  • July 5, 2020

Links

Made with

  • HTML (Pug) / CSS (Sass)
Топ-пост этого месяца:  Создание плагина для WordPress Избранные записи

About the code

Emojibox — Checkbox with Emojis

Checkbox with emojis (without JS). Create more expressive checkboxes with emojis. They combine the simplicity of checkboxes for the user with the expressiveness of emojis. It makes use of checkbox and radio button to create a binary or non-binary selection. Animations are done with CSS transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Andreas Storm
  • May 9, 2020

Links

Made with

  • HTML
  • CSS/Sass

About the code

CSS Toggle

Material design CSS toggle.

Author

  • Andreas Storm
  • May 3, 2020

Links

Made with

  • HTML
  • CSS/Stylus

About the code

CSS Design Checkbox

CSS material design checkbox.

Author

  • Andreas Storm
  • April 18, 2020

Links

Made with

  • HTML
  • CSS/Sass

About the code

Checkbox

Author

  • Adam Kuhn
  • April 17, 2020

Links

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

Pure CSS Skateboard Checkbox

Built with pure css and a bit of patience.

Author

  • Adam Kuhn
  • February 1, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Toggles

Author

  • David Darnes
  • March 13, 2020

Links

Made with

About the code

Toggle

Nice smooth movement and the added detail with the animated turn on the head. Based on «Toggle» by Daryl Ginn.

Author

  • Katherine Kato
  • March 9, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Toggle

Pure CSS toggle switch.

Author

  • Luis Adame
  • February 18, 2020

Links

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

Cool Checkbox With SVG

A custom checkbox that makes use of SVG to animate the tick inside of it.

Author

  • Ana Tudor
  • February 15, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

CSS Toggle Switch

CSS soft toggle switch.

Author

  • Brett Commandeur
  • February 13, 2020

Links

Made with

About the code

Emoji Checkbox

Pure CSS emoji checkbox.

Author

  • Buddy Reno
  • September 12, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Material Inspired Checkboxes

The trick to this is placing the label after the checkbox. That way you can use the :checked state to toggle the different pseudo elements on the label. No javascript necessary. To make the background animation work, you’ll need a tiny bit of magic. The label:before element is a small 10×10 circle. We animate the scale of it instead of the size so that we can keep the proportion of the circle and make it look like it «fills out» the bar. The max width of the form is set to 550px. The :before element animates by using scale3d (for hardware acceleration) by 56 times. 56 * 10 === 560. This allows the circle to fill out the bar by going slightly outside the bounds of the input group container.

Замена стандартного checkbox по средствам CSS3

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript» . Прекрасные кнопочки, но там используются картинки. В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.

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

И так начнем! Описывать тут особо нечего, просто копируем и ставим себе на сайт.

Вот и всё!

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru

Статьи по теме CSS3

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

Дорогие веб-мастера, хочу поделиться с вами очень хорошим решением создания календаря событий, так как при создании нового сайта заказчику нужен был именно ткого рода календарь мероприятий и я перелопатил весь инет в поисках чего-то приличного! И вот оно счастье. Я выкладываю уже перелапаченый мной вариант и в него забил даты до 28.01.2021.

Здравствуйте, уважаемые читатели! Есть много способов, показать информацию о продукте. В этом уроке я собираюсь рассказать Вам, как можно сделать куб с информацией на гранях. Будет применен эффект, который основан на CSS3 Transform 3D. Эффект корректно работает в FF, Chrome и Safari, Opera и IE пока не поддерживают CSS Transform 3D.

Контактна форма является важной составляющей сайта, с помощью данной формы посетитель может связаться с администрацией сайта.

Раскрутка в соцсетях

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

Топ-пост этого месяца:  Инструкция по настройке Key Collector и работе с программой

Хотите уникальный сайт? Ознакомьтесь с нашими ценами!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка. ПОРТФОЛИО

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Форма обратной связи

Все поля обязательны для заполнения!

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика — это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа — это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Меняем оформление input checkbox с помощью CSS

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

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

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

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

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

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

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

CSS → Стилизация checkbox-ов на чистом CSS

Когда дизайнер не может «выдать» нормальный дизайн, он начинает стилизовать стандартные контролы (c) @petrovnn

Ниже, пример стилизации чекбоксов под MacOS.

Первым правилом скрываем дефолтный контрол, так как тонкой темизации он не поддаётся. Вторым, добавляем для соседнего лэйбла фон с нарисованным чекбоксом. Третьим правилом меняем фон лэйбла если чекбокс к которому он привязан находится в состоянии checked (применяется техника спрайтов).

Работает во всех современных браузерах.

Добавлено 18.01.2004

Вариант с псевдоэлементом:

Комментарии

В опере не работает

в опере это дело проверялось первым делом, работает отлично

Проблема в том, что не у всех современные браузеры. А у большинства заказчиков так вообще IE6 = корпоративный браузер, так что без скриптов не обойтись, как не крути. 🙁

P.S.: смайликов нет?

У меня опера 11.5 portable — не работает.

Тестил в опере, после первой загрузки страницы не заработало, F5 — все ок!
Попробовал в IE8 — не работает 🙁

не работает в IE7, 8

с каких пор IE7/8 стали современными браузерами?)

Реально не работает в Опере.
Версия: 11.51
Сборка: 1087
Платформа: Mac OS X
Система: 10.6.5

to xandeadx
ну 7 фиг с ним еще, а IE8 это максимум что ставится на winxp. 9-ый ставится только на 7ку.

Вероятно, Опера не только скрывает контрол, но и не дает по нему кликать. Кроме того, клик по соответсвующему лейблу также не приводит к нужному результату, а другие браузеры просто делают его невидимым, но кликать позволяют. В итоге «галка» в Опере не ставится и, соответственно, смены бекграунда не происходит.

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

И в Опере все заработало.

Гера, спасибо, демку исправил.

отпишитесь те у кого не работало 🙂

В опере 11.5 portable теперь у меня заработало.

IE8 — не работает. Чекбокс чекается, но видимо он не понимает конструкцию input[type=»checkbox»]:checked + label

Спасибо, крутой способ.

Vydrin_AP,
В IE8 не поддерживается псевдо-класс :checked. Для него можно через js вешать и снимать класс «checked».

А как вам такое применение?

Спасибо автору, мне очень помогло.

Но я вот, тоже напоролся на IE 8, причём сделал кучу чекбоксов по данной схеме и когда обнаружил, что в IE 8 они совершенно не работаю, чуть было не выпрыгнул из окна первого этажа:). Собирался уж всё переделывать.
Но, Ураа, ураа и ещё раз ураа. Решение случайным образом нашлось.
И помог мне в этот этот пост на хабре: http://habrahabr.ru/post/44686/
Если конкретнее, то спасло подключение библиотеки:

Топ-пост этого месяца:  Как правильно создать robots для сайта – полное руководство.txt

Хочу обратить ваше внимание, что под IE 8 я подключать библиотеку от девятого.
Теперь чекбоксы работаю и в IE 8, а я жив, здоров и в хорошем настроение, чего и вам желаю 🙂

lutidza, какой библиотеки?

Я брал: IE9.js (Вырезался в предыдущем посте код 🙂

Спасибо, очень помогло, компенсировала кликами 🙂

Огромное-огромное спасибо, всё получилось просто супер)

Оформление и стилизация option select, radio buttons, input checkbox CSS3

Стилизация option select, radio buttons, input checkbox на чистом CSS3, без использования дополнительных библиотек и плагинов jQuery.

Оформление и стилизация option select, radio buttons, input checkbox CSS3

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

Ниже приведен код оформления и стилизации option select, radio buttons, input checkbox на чистом CSS3, без использования дополнительных библиотек и плагинов jQuery. Важно отметить работоспособность кода и мощную кроссбраузерную поддержку.

Чекбоксы/Checkbox и радиокнопки/radiobottom

Атрибут checkbox применяются в форме для выбора нескольких значений. В отличие от атрибута radio , который создает переключать между вариантами и позволяет выбрать только один из них. То атрибут checkbox дает возможность поставить два флажка или более в зависимости от потребности. Checkbox считается как альтернатива атрибута radio .

С атрибутом checkbox используется другие атрибуты, таки как:

Name – уникальное имя элемента. Служит для дальнейшей отправки данных на сервер.
Value – значение элемента.
Checked – устанавливает активный флажок по умолчанию.

Также можно использовать атрибут label , который значительно улучшает юзабилити радиокнопок. При его использование необязательно кликать на саму радио точку, достаточно кликнуть на надпись находящийся рядом возле переключателя.

Пример без использования атрибута label.

Пример с использованием атрибута label.

Yes Label

По спецификации атрибут label используется с атрибутом for для связи с элементом формы. Применяется в том случае если часть элемента формы и текст разделены, то связываются атрибутом for через идентификатор.

Стили Checkbox`в.

К стилизации checkbox`в и radio кнопок применяется псевдокласс :checked в состояние «включено». Данный псевдокласс появился с обновлением каскадной таблице CSS3. Что дает больше возможностей в оформлении радиокнопок.

Стилизация флажков

Для изменения стиля флажков и переключателей мы вообще прячем исходный элемент с помощью значения none у свойства display, а нужный стиль применяем к элементу , связанный с этим . В примере 1 флажок сделан как цветной прямоугольник, внутри которого перемещается белый квадратик (рис. 1). Включенный флажок выглядит как прямоугольник синего цвета с квадратиком слева; выключенный флажок выглядит как прямоугольник серого цвета с квадратиком справа.

Рис. 1. Вид флажка

Чтобы квадратик плавно перемещался из одного положения в другое, добавлено свойство transition, значением которого выступает время движения, в данном случае полсекунды.

Пример 1. Стилизация флажка

Сам квадратик выводится с помощью псевдоэлемента ::before, который добавляется к селектору label . Это позволяет легко стилизовать элемент, к примеру, сделать его круглым, добавив лишь свойство border-radius.

CSS стилизация checkbox и radio для мобильных устройств

Сделать чекбоксы input[type=»checkbox»] и радиокнопки input[type=»radio»] красивыми – задача не сложная. Однако, чаще всего, за этим следует добавление новых элементов, а следовательно и усложнение DOM-структуры документа.

Для современных мобильных браузеров, а также декстопных браузеров на основе WebKit и Blink (Chrome, Opera, Vivaldi и т.д.), для некоторых типов инпутов можо создавать псевдо-элементы after и before .

Что же написано в коде?

Ничего лишнего – только label и input .

Здесь тоже ничего трудного. Создается новый псевдо-элемент для каждого из инпутов, в контенте которого используются стандартные символы шрифта times new roman .

Напомню, что пока из-за отсутствия поддержки псевдо-элементов для input данный способ не работает в Firefox и IE.

Стилизация chekbox в table (checkbox и label находятся в разных контейнерах)

Есть table с checkbox

как стилизировать input[type=»checkbox»] если label находиться в другом td

код генерирует cms магазина

2 ответа 2

Вы можете спокойно использовать несколько label для одного чекбокса, например:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Добавить комментарий