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


Содержание

Анимированный checkbox с помощью css3 без jquery и плагинов

К сожалению, нельзя через css обстилеть input[type=»checkbox»]. В статье рассмотрен метод кастомизации чекбокса путем наложения картинки с анимированным псевдоэлементом поверх дефолтного.

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

Для такого чекбокса понадобятся 2 картинки (если у вас нет картинок, ниже будет описан способ без них): картинка самого чекбокса и галочки, которая будет добавляться в выбранном состоянии:

Вот такая разметка была у чекбокса изначально:

Для начала нужно немного усложнить разметку:

Добавился оборачивающий label и span «checkbox-pic», который содержит картинку нового чекбокса.

Живой пример на jsfiddle: Демо

Анимированный чекбокс без использования картинок

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

Рассмотрим пример с подключением иконочного шрифта Font Awesome. Тут ссылка для подключения шрифта.
Иконки Font Awesome.

— fa-square-o подходит для пустого чекбокса
— fa-check — галочка
(естественно, вы можете брать любые другие понравившиеся иконки, чтобы вместо галочки был, например, цветочек, и т.д. :))

Вот что получилось:

Разметка изменилась совсем немного, теперь вместо checkbox-pic пояислись два i — первый для иконки пустого чекбокса, второй для галочки:

Стилизация элементов checkbox и radio button на CSS3

Здравствуйте, уважаемые читатели XoZbloga! Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажу как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3!

То что получилось посмотрите и опробуйте на демо-странице или скачайте исходники:

HTML разметка

Расположим элементы на странице:

Здесь ничего особенного, каждому элементу задаем id и name , также используем label для описания элементов «переключателя» и «флажка». Внутрь тега label , вставляем span . Для чего именно, написано ниже.

Правила CSS

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

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

С помощью CSS селектора выбираем все span внутри тега label , которые принадлежат элементам input с типом checkbox (т.е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):


Для выбранных span задаем высоту и ширину в 19px , и располагаем фоновое изображение.

Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked ). Для этого просто смещаем данное изображение влево на 19px :

Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px и немного изменятся css селектор, вместо type=»checkbox» используется type=»radio» .

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Стилизуем checkbox css

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

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

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

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

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

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

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

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

HTML код

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

Радио кнопки

Чекбоксы

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

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

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

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

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

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


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

Илон Маск рекомендует:  Запрет кэширования страницы на HTML, PHP, htaccess

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

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

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

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

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

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

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

Итоги

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

Для начала раз­ме­тим чекбокс:

К сожа­ле­нию, сам чек­бокс сти­ли­зо­вать невоз­можно, поэтому мы спря­чем насто­я­щий чек­бокс, доба­вим вспо­мо­га­тель­ный span и сти­ли­зуем его. Для этого вос­поль­зу­емся псев­до­клас­сом :checked , ука­зы­ва­ю­щим на состо­я­ние чек­бокса, и селек­то­ром + , поз­во­ля­ю­щим выбрать сосед­ний элемент:

Улуч­шим чек­бокс, заме­нив закра­ши­ва­ние на насто­я­щую галочку. Для этого вос­поль­зу­емся псев­до­эле­мен­том ::before , кото­рый поз­во­ляет вста­вить допол­ни­тель­ный эле­мент перед указанным:

Если галка в вашем шрифте не под­хо­дит, можно под­клю­чить для неё дру­гой шрифт:

Если галка нестан­дарт­ная, можно под­ста­вить картинку:

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

Комментарии

Александр Глевский
25 октября 2020

Сафари при активации чекбокса выделяет и текст. Можно ли это победить?

Евгений Закурдаев
25 октября 2020

Спан избыточен, псевдоэлементы могут быть у лейбла.
Ставить слэш в одиночных тегах — моветон, XHTML давно умер.

Юрий Хан
25 октября 2020

А дальше для всего вот этого надо решать кучу неинтересных задач.

Скрытый чекбокс недоступен с клавиатуры.
Скрытый чекбокс не читается скринридером.
Галочка уезжает из квадрата, если пользователь запретил загрузку шрифтов и/или выставил себе отличный от дефолтного интерлиньяж.
расплывается на (если верстальщик не положил заранее картинку двойного размера).

Дмитрий Олляк
25 октября 2020

У предложенного решения неприятный побочный эффект — такой чекбокс недоступен с клавиатуры. Это важно не только для пользователей с ограниченными возможностями. Но и в больших формах, админках, где удобно скакать по инпутам табом. Хороший (в смысле плохой) пример — чекбоксы в админке Битрикса. Это боль.

Чтобы кастомный чекбокс был доступен с клавиатуры, надо оставить штатный чекбокс в DOM и добавить стиль на кастомный чекбокс с помощью :focus. Небезупречный пример реализации: https://codepen.io/Ollyak/pen/wYRaOw

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

Тем не менее можно воспользоваться : none, но в этом случае вы запретите выделение полностью.

Максим Самойлов
28 октября 2020

Присоединяюсь к Юрию и Дмитрию — получившийся чекбокс недоступен с клавиатуры и для скринридеров.
Как скрыть чекбокс правильно, можно почитать в справке к ally.js Родни Рейма: https://allyjs.io/tutorials/.html

Макс Савченко
30 октября 2020

Чекбокс с клавиатуры будет доступен, но только не нужно его скрывать через display:none .
Достаточно добавить прозрачность, абсолютно спозиционировать над фэйковым боксом и отключить пользовательские события pointer-events: none . Только не выносите его на северный полюс как в примере у Димы ↑ — left: -100000px .
Это кстати ещё необходимо чтобы показывались браузерные ошибки валидации.


Евгений Закурдаев, без элемента нельзя будет стилизовать состояния инпута.

Создание доступных чекбоксов и радиокнопок на чистом CSS

Дата публикации: 2020-02-17

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

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

псевдоэлементы ::before и ::after

CSS псевдокласс :checked

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Представленная тройка хорошо поддерживается почти во всех браузерах (IE 10 и выше).

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

Как отобразить изображение вместо флажка?

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

Илон Маск рекомендует:  Что такое код initgraph

Подобно этому с небольшим jQuery и css: DEMO

Как говорили другие, вы можете использовать параметр прокси-элемента (div) и изменить флажок флажка, отмеченный/непроверенный, когда нажата кнопка div. Ниже приведен рабочий пример именно того, что вам нужно: (я использовал простой javascript, чтобы читатели могли его быстро понять)

1) Прежде всего создайте два класса css для проверенного состояния и одно для неконтролируемого состояния:

2) Создайте HTML для DIV и флажков. Идея состоит в том, что для каждого флажка (input type = checkbox) у нас будет div. Идентификатор div будет помечен словом proxy, чтобы мы могли его идентифицировать. Также для каждого прокси-сервера мы назначим начальный класс .image-checkbox. Пусть говорят, что мы создаем два флажка:

Исходные флажки (скрыть его со свойством стиля [видимость: скрытый])

3) Теперь нам понадобится код javascript, чтобы установить флажок для проверки/снятия флажка при нажатии прокси-элементов (DIV). Также нам нужно изменить фоновое изображение прокси-разделов в соответствии с текущим состоянием флажка. Мы можем вызвать функцию для присоединения обработчиков событий при загрузке документа:

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

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

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

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


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

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

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

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

Итоги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Верстка чекбоксов. Как сделать в css оформление checkbox-ов

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

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

Илон Маск рекомендует:  Что такое код freeresource

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


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

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

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

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

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

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

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

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

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

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

Как сделать в css оформление checkbox-ов

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

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

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

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

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

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

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

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

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

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL