Css checkbox checked - IT Справочник
Llscompany.ru

IT Справочник
6 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Css checkbox checked

Стилизуем чекбоксы и радиокнопки с CSS3

Благодаря 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
Просмотров: 169600
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

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

Дата публикации: 2015-09-10

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

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

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

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

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

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

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

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

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

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

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

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

HTML

CSS

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

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

HTML

CSS

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

Читать еще:  Язык си учебник

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

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

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

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

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

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

Стилизация чекбоксов и переключателей CSS

Чтоб создать и оформить чекбоксы или радиокнопки, то безусловно требуется дизайн, который будет на CSS, но без использование JavaScript-решение. Давайте в материале подробно рассмотрим, как можно стилизовать чекбоксы и также радио кнопки. Где в первом подборке представлены checkbox в 3 вариантах, которые будут реализованы при помощи CSS, а также с использованием псевдоэлементов before и after.

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

Рассматривая дизайн пользовательского интерфейса, то он после установки будет со знаком с флажками и также переключателями. Эти функций отлично помогают пользователю выполнять многие онлайн-задачи и безусловно их можно часто встретить на современном дизайне сайта. Если первый вариант идет в цветной стилистике, то второй более простой по гамме цвета, так как она одна «темная» где по визуализации не чем не уступает, что аналогично выстроена на чистом CSS.

Когда использовать флажки и переключатели?

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

Стилизация чекбоксов на CSS

CSS: Большая кнопка

.checkbox <
display: inline-block;
padding: 5px 5px 5px 46px;
margin: 0;
position: relative;
cursor: pointer;
>
.checkbox input <
position: absolute;
opacity: 0;
cursor: inherit;
>
.checkbox span <
display: inline-block;
font: normal 12px/18px Arial;
padding: 1px 0;
>
.checkbox span:before,
.checkbox span:after <
content: »;
position: absolute;
top: 50%;
transition: .3s;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
>
.checkbox span:before <
left: 0;
height: 14px;
margin-top: -7px;
width: 36px;
border-radius: 7px;
background: #aaa;
box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
>
.checkbox span:after <
left: 0;
margin-top: -10px;
height: 20px;
width: 20px;
background: #fafafa;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,.5);
>

.checkbox input:checked + span:before <
background-color: #93c9f3;
>
.checkbox input:checked + span:after <
background-color: #2793e6;
left: 16px;
>

.checkbox input:focus + span:before <
box-shadow: 0 0 0 3px rgba(50,150,255,.2);
>

.checkbox input:disabled + span <
opacity: .35;
>
.checkbox input:disabled + span:before <
background: #ccc;
>

CSS: Маленькая кнопка внутри

.checkbox <
display: inline-block;
padding: 5px 5px 5px 38px;
margin: 0;
position: relative;
cursor: pointer;
>
.checkbox input <
position: absolute;
opacity: 0;
cursor: inherit;
>
.checkbox span <
display: inline-block;
font: normal 12px/16px Arial;
padding: 0;
>
.checkbox span:before,
.checkbox span:after <
content: »;
position: absolute;
top: 50%;
transition: .3s;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
>
.checkbox span:before <
left: 0;
height: 16px;
margin-top: -8px;
width: 28px;
border-radius: 8px;
background: #e75b5b;
>
.checkbox span:after <
left: 2px;
height: 12px;
width: 12px;
margin-top: -6px;
background: #fff;
border-radius: 50%;
>

.checkbox input:checked + span:before <
background-color: #55b183;
>
.checkbox input:checked + span:after <
left: 14px;
>

.checkbox input:focus + span:before <
box-shadow: 0 0 0 3px rgba(50,150,255,.2);
>

.checkbox input:disabled + span <
opacity: .35;
>
.checkbox input:disabled + span:before <
background: #999;
>

CSS: Большая кнопка внутри

.checkbox <
display: inline-block;
padding: 5px 5px 5px 56px;
margin: 0;
position: relative;
cursor: pointer;
>
.checkbox input <
position: absolute;
opacity: 0;
cursor: inherit;
>
.checkbox span <
display: inline-block;
font: normal 12px/16px Arial;
padding: 4px 0;
>
.checkbox span:before,
.checkbox span:after <
content: »;
position: absolute;
top: 50%;
transition: .3s;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
>
.checkbox span:before <
left: 0;
height: 24px;
margin-top: -12px;
width: 46px;
border-radius: 12px;
background: #ddd;
box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
>
.checkbox span:after <
left: 1px;
height: 22px;
width: 22px;
margin-top: -11px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
>

.checkbox input:checked + span:before <
background-color: #4caf50;
>
.checkbox input:checked + span:after <
left: 23px;
>

.checkbox input:focus + span:before <
box-shadow: 0 0 0 3px rgba(50,150,255,.2);
>

.checkbox input:disabled + span <
opacity: .35;
>
.checkbox input:disabled + span:before <
background: #ddd;
>

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

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

input[type=checkbox] + label:before <
content: «2713»;
color: transparent;
display: inline-block;
border: 1px solid #000;
font-size: 20px;
line-height: 22px;
margin: -5px 5px 0 0;
height: 20px;
width: 20px;
text-align: center;
vertical-align: middle;
transition: color ease .3s;
>

Читать еще:  Этот формуляр небезопасен

input[type=checkbox]:checked + label:before <
color: #000;
>

input[type=radio] + label:before <
content: «26AB»;
border: 1px solid #000;
border-radius: 50%;
display: inline-block;
border: 1px solid #000;
font-size: 20px;
line-height: 20px;
margin: -5px 5px 0 0;
height: 20px;
width: 20px;
text-align: center;
vertical-align: middle;
font-size: 0;
transition: font-size ease .3s;
>
input[type=radio]:checked + label:before <
font-size: 20px;
>

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

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

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

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

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

Как сделать чекбокс на HTML/CSS

Сегодня вы узнаете как сделать чекбокс на HTML и добавить ему CSS стилей для лучшей совместимости с дизайном сайта.

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

Чекбокс на HTML

Создадим блок с четырьмя чекбоксами, первый будет отмечен – с галочкой. Каждый чекбокс будет заключен в тег label, внутри которого поле для ввода, текст и элемент span, который предстоит стилизовать.

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

CSS для чекбокс

Строчный тег label, заменим на блочный (display: block), чтобы чекбоксы, встали друг под другом, user-select: none – запрещает пользователю выделять элемент.

.container <
display: block;
user-select: none;
>

Этот код прячет дефолтные браузерные стили для чекбокса. Мы делаем элемент полностью прозрачным за счет opacity, width и height с нулевым значением и на их месте, задаем кастомные стили для чекбокса.

.container input <
opacity: 0;
height: 0;
width: 0;
>

Создаем кастомные чекбоксы. Меняем размеры и цвет фона.

.checkmark <
height: 23px;
width: 22px;
background-color: #eec321;
>

При наведении курсора, делаем цвет фона немного темнее.

.checkmark <
background-color: #ccc678;
>

Для отмеченного чекбокса, задаем другой цвет для фона.

.checkmark <
background-color: #2196f3;
>

Прячем галочку для не отмеченных чекбоксов, применив псевдоэлемент after.

.checkmark:after <
content: «»;
position: absolute;
display: none;
>

Делаем видимой галочку, только для отмеченных чекбоксов.

.checkmark:after <
display: block;
>

Рисуем и стилизуем галочку. Галочку мы рисуем на чистом CSS. Изобразим прямоугольник с белой рамкой, у двух сторон прямоугольника, рамки нет (нулевая ширина), получается прямоугольный угол, мы его поворачиваем на 45 градусов и получается галочка.

.container .checkmark:after <
left: 8px;
top: 6px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
>

Посмотреть код целиком можно на Codepen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    83 Checkboxes CSS

    Collection of free HTML and CSS custom checkbox examples: with image, with label, checked, etc. Update of February 2019 collection. 14 new items.

    Related Articles

    Author

    • Katherine Kato
    • February 17, 2020

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Todo Checkbox

    Todo checkbox with a text fill hover and strikethrough effect when checked.

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

    Author

    • Aaron Iker
    • January 31, 2020

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    +/- Toggle

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

    Author

    • Andreas Storm
    • January 29, 2020

    Links

    Made with

    • HTML (Pug) / CSS (Stylus)

    About a code

    Gooey Checkbox

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

    Author

    • Braydon Coyer
    • January 28, 2020

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Neuomorphic Checkboxes

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

    Author

    • Aaron Iker
    • January 11, 2020

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    2020 Toggles

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

    Author

    • Chris Weissenberger
    • December 23, 2019

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Neumorphic Design

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

    Author

    • Aaron Iker
    • December 9, 2019

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Checkboxes

    Micro-interaction is a couple variations on a classic checkbox.

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

    Author

    • Andreas Storm
    • October 3, 2019

    Links

    Made with

    • HTML (Pug) / CSS (Sass)

    About a code

    Checkmark

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

    Читать еще:  Object inspector в delphi

    Author

    • Himalaya Singh
    • June 29, 2019

    Links

    Made with

    • HTML / CSS

    About a code

    Checkbox Animation

    Checkbox animation created using HTML and CSS only.

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

    Author

    • Andreas Storm
    • June 15, 2019

    Links

    Made with

    • HTML (Pug) / CSS (Stylus)

    About a code

    Checkbox

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

    Author

    • Mohammadreza Ziadzadeh
    • June 15, 2019

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Checkbox

    Simple checkbox with animation.

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

    Author

    • Ana Tudor
    • June 6, 2019

    Links

    Made with

    • HTML / CSS (SCSS)

    About a code

    Fancy Checkbox

    Uses only a checkbox input and label (so it’s accessible by default) inside a form (as blending directly with the body is buggy).

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

    Author

    • Andreas Storm
    • February 6, 2019

    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, 2019

    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, 2018

    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, 2018

    Links

    Made with

    • HTML / CSS

    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, 2018

    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

    • Jase
    • August 23, 2018

    Links

    Made with

    • HTML / CSS

    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

    • Stas Melnikov
    • July 18, 2018

    Links

    Made with

    • HTML / CSS

    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, 2018

    Links

    Made with

    • HTML (Pug) / CSS (Sass)

    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, 2018

    Links

    Made with

    • HTML
    • CSS/Sass

    About the code

    CSS Toggle

    Material design CSS toggle.

    Author

    • Andreas Storm
    • May 3, 2018

    Links

    Made with

    • HTML
    • CSS/Stylus

    About the code

    CSS Design Checkbox

    CSS material design checkbox.

    Author

    • Andreas Storm
    • April 18, 2018

    Links

    Made with

    • HTML
    • CSS/Sass

    About the code

    Checkbox

    Author

    • Adam Kuhn
    • April 17, 2018

    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, 2018

    Links

    Made with

    • HTML
    • CSS/SCSS

    About the code

    Toggles

    Author

    • David Darnes
    • March 13, 2018

    Links

    Made with

    • HTML
    • CSS

    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, 2018

    Links

    Made with

    • HTML
    • CSS/SCSS

    About the code

    Toggle

    Pure CSS toggle switch.

    Author

    • Luis Adame
    • February 18, 2018

    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, 2018

    Links

    Made with

    • HTML
    • CSS/SCSS

    About the code

    CSS Toggle Switch

    CSS soft toggle switch.

    Author

    • Brett Commandeur
    • February 13, 2018

    Links

    Made with

    • HTML
    • CSS

    About the code

    Emoji Checkbox

    Pure CSS emoji checkbox.

    Author

    • Buddy Reno
    • September 12, 2017

    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.

    Ссылка на основную публикацию
    ВсеИнструменты 220 Вольт
    Adblock
    detector