Css radio: Стилизация Radio Button - Блог сумасшедшего сисадмина

Содержание

Стилизация переключателей (радио-кнопок) в CSS

Радио-кнопки подразумевают, что вы выбираете один элемент из некоторого количества, поэтому элемент <input type="radio"> получил название переключателя в отличие от флажков, которые подразумевают множественный выбор. Браузеры довольно неплохо отображают радиокнопки по умолчанию.

Выбор 1 Выбор 2 Выбор 2

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

Как правило, стилизация радио-кнопок основана на использовании такого элемента, как label, клик на котором приводит к выбору определенного переключателя, с которым <label> связан с помощью атрибута for, в котором указывается id переключателя. Второй вариант — это когда в разметке радио-переключатель находится внутри элемента label.

Простой пример

See the Pen CSS Radio Buttons by Tristan White (@triss90) on CodePen.

18892

Радио-кнопки, похожие на флажки

Если вы хотите стилизовать переключатели в виде флажков — пример от Andrew Vereshchak — как раз то, что нужно.

See the Pen Toggle radio intput with the label by Andrew Vereshchak (@multum) on CodePen.18892

Переключатели с изменением цвета и иконки

Здесь автор Andrew использовал абсолютное позиционирование для отдельного блока с классом .switch, в который входят 2 <label> и <span>. Также здесь не обошлось без

псевдоэлемента ::after и псевдокласса :checked.

See the Pen Awesome Toggle Button by Andrew (@theawesomecoder61) on CodePen.18892

Разноцветные радио-кнопки

В этом примере от Dronca Raul каждый переключатель имеет свой цвет и галочку внутри при щелчке на элементе.

See the Pen Custom Radio Buttons by Dronca Raul (@rauldronca) on CodePen.18892

Используем переключатели для выбора цвета

В этом примере тема цветов для переключателей продолжается. Здесь мы не только прячем элемент <input type="radio"> с помощью CSS, но и изменяем фоновый цвет элемента с id="output" на тот, который указан в качестве value для <input> и фона для span-элемента, вло женного в <label>.

See the Pen Radio Color Picker by Elen (@ambassador) on CodePen.18892

Переключатели Да-Нет-Возможно

Еще одно цветовое решение от Matthew Blode.

See the Pen Flat Radio — Yes/No by Matthew Blode (@mblode) on CodePen. 18892

Переключатель макета

Этот пример от Naoya очень удобен для демонстрации макетов с разной шириной. Интересно, что радио-кнопки, а точнее заменяющие их элементы label выглядят как … ссылки с подчеркиванием выбранного (псевдокласс :checked) в данный момент элемента.

See the Pen CSS Switch Layout by Naoya (@nxworld) on CodePen.18892

Вкладки-переключатели с анимацией

See the Pen Sliding tabs | CSS transitions only by Håvard Brynjulfsen (@havardob) on CodePen.0

Автор Ryan Mulligan

See the Pen Isometric Light Switch by Elen (@ambassador)
on CodePen.

Выбор блюд

В этом примере от Kris Hedstrom радио-кнопки в какой-то степени похожи на чекбоксы (флажки) — они отмечают ваш выбор в виде галочки.

See the Pen Snacks? Flat radio button inputs… by Kris Hedstrom (@kristofferh) on CodePen.18892

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

Автор Ivan Grozdic

See the Pen Checkboxes and radios (dark/light) — pure css — #06 by Ivan Grozdic (@ig_design)on CodePen.0

Использование радио-кнопок для выставления рейтинга в виде звездочек

Автор Stas Melnikov

See the Pen Pure CSS Rating via CSS Custom Properties as API by Stas Melnikov (@melnik909) on CodePen. 18892

Анимация при переключении выбора

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

Автор: Tommaso Poletti

See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen.18892

Простые переключения с эффектом вдавливания от Pamela Dayne

See the Pen Just very simple radio buttons by Pamela Dayne (@pamdayne) on CodePen.18892

Переключение с перепрыгиванием от Jon Kantner

See the Pen Radio Hopping by Jon Kantner (@jkantner)
on CodePen.

Автор Liam использовал для анимации JS-код.

See the Pen Bulgy radios by Liam (@liamj) on CodePen.18892

Интересное решение с радио-кнопками на темном фоне от Andrej Sharapov

See the Pen Animated SVG radio buttons by Andrej Sharapov (@andrejsharapov) on CodePen.18892

Анимация и стили как для радио-кнопок, так и для флажков от WILDER TAYPE.

See the Pen Ripple animation on input type radio and Checkbox by WILDER TAYPE (@wilder_taype) on CodePen.18892

Использование маски

See the Pen Underground radios by Mikael Ainalem (@ainalem) on CodePen. 18892

«Текущая» кнопка

See the Pen Liquid Radio Button by Tamino Martinius (@Zaku) on CodePen.18892

Замечательное решение для переключения кнопок меню

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.18892

Последовательное и быстрое заполнение кнопки

See the Pen Input Radio by Andreas Storm (@avstorm) on CodePen.18892

Выбираем кредитную карту вместе с Dean

See the Pen Recreation: Card theme switcher by Dean (@visualcookie) on CodePen.

18892

Перепрыгивающий шарик от Jon Kantner

Вариант 1

See the Pen Radio Buttons With Marble and Wood by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Rolling Radio Buttons by Jon Kantner (@jkantner) on CodePen.18892

Вариант 3 от web-tiki

See the Pen CSS only input radio select concept by web-tiki (@web-tiki) on CodePen.18892

Переключатели в виде блоков с иконками

Автор Gabriel Ferreira предлагает использовать переключатели в виде блоков с анимированными иконками. Это можно сделать не только для Front-End/Back-End, но и для любых других текстов.

See the Pen Radio Button Big Square [Just CSS] by Gabriel Ferreira (@gabrielferreira) on CodePen.18892

Переключатель мужчина-женщина

See the Pen Radio button styling by Morten Olsen (@morten-olsen) on CodePen.18892

Соединительные линии, ведущие к радио-кнопкам

See the Pen Radio Button Circuit by LukasOe (@lukasoe) on CodePen.18892

Переключатели с отметкой в верхнем углу блока

При клике на блоке выбор отмечается сменой цвета и галочкой в круге от Rosa.

See the Pen Checkout Form by Rosa (@RRoberts) on CodePen.18892

Радио-кнопки как переключатели для радио от Jon Kantner

Вариант 1

See the Pen Literal Radio Buttons by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Literal Radio Buttons (Neumorphic Version) by Jon Kantner (@jkantner) on CodePen.18892

Радио-кнопки для вкладок (табов)

Ronny Siikaluoma предлагает вам использовать радио-кнопки для формирования отзывчивых (адаптивных) вкладок. Заметьте, без всякого JavaScript.

See the Pen Responsive Tabs with Pure CSS by Ronny Siikaluoma (@siiron) on CodePen.18892

Еще один вариант вкладок от Tristan White

See the Pen Tabs (checkbox-hack) by Tristan White (@triss90) on CodePen.18892

Выбор билетов с ценой и временем от Dannie Vinther

See the Pen Choose Ticket [a11y] by Dannie Vinther (@dannievinther) on CodePen.18892

Социальные кнопки

В этом примере от Aron использованы не только радио-кнопки, но и флажки (чекбоксы). При клике на элемент вы увидите pop-up окно с названием выбранной компании или соцсети.

See the Pen Pure CSS Option ( radio & checkbox ) No JS by Aron (@Aoyue) on CodePen.18892

Переключение иконок Google maps

See the Pen Google maps radio buttons CSS only by Elias Meire (@eliasmeire) on CodePen.18892

Переключение цветовых блоков

В этом примере от Ivan Grozdic элементы label выглядят и работают как ссылки, но без JavaScript, сортируя цветовые блоки.

See the Pen Content filter v2 — pure css — #09 by Ivan Grozdic (@ig_design) on CodePen.18892

Использование радио-кнопок для фильтации по категориям

Автор примера от ресурса Envato Tuts+ предлагают css-код, который без JavaScript служит для фильтрации категорий портфолио.

See the Pen
Build a Filtering Component in Pure CSS by Envato Tuts+ (@tutsplus)
on CodePen.0

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

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

HTML разметка

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


	
<!-- Элемент флажок -->
<input type="checkbox" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

<!-- Элемент переключатель -->
<input type="radio" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>

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

Правила CSS

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


	
input[type="checkbox"] {
    display:none;
}

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


	
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

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

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

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


	
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

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

2.89
1
2
3
4
5

Голосов: 1218 | Просмотров: 12095

HTML input type=»radio»

❮ HTML атрибут type

Пример

Радиокнопки позволяют пользователю выбрать только один из ограниченного числа вариантов:

<метка for="html">HTML

CSS

JavaScript

Попробуйте сами »

Определение и использование

определяет переключатель.

Радиокнопки обычно представлены в радиогруппах (набор радиокнопок). описание набора связанных опций). Только одна радиокнопка в группе может быть выбраны одновременно.

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

Примечание: Атрибут value определяет уникальное значение связанные с каждым переключателем. Значение не показывается пользователю, но значение, которое отправляется на сервер при «отправке», чтобы определить, какой переключатель что было выбрано.

Совет: Всегда добавляйте тег для лучших практик доступности!

Поддержка браузера

Атрибут
тип = «радио»	Да	Да	Да	Да	Да

Синтаксис

❮ Атрибут типа HTML

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.

CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9003 000 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

88 Радиокнопки CSS

Коллекция HTML и CSS радиокнопка примеры кода: пользовательские, множественные и групповые радиокнопки . Обновление коллекции марта 2020 года. 11 новых предметов.

Радиокнопки Bootstrap
Флажки CSS
Тумблеры CSS