Css radio input type: CSS стилизация checkbox и radio — 2 варианта

Содержание

Radio buttons React component — Material-UI

Radio buttons allow the user to select one option from a set.

Use radio buttons when the user needs to see all available options. Если доступные параметры можно свернуть, возможно лучше использовать раскрывающееся меню, так как оно занимает меньше места.

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

RadioGroup

RadioGroup — это полезная обертка, используемая для группировки компонентов Radio, она обеспечивает более простой API и управление с клавиатуры.

To lay out the buttons horizontally, set the row prop: <RadioGroup row />.

Standalone radio buttons

Radio can also be used standalone, without the RadioGroup wrapper.

Расположение метки

You can change the placement of the label with the FormControlLabel component’s labelPlacement prop:

Отображение ошибок

In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted:

Customized radios

Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.

Бесплатно

Доступность

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#radiobutton)

Все элементы формы должны иметь метки, в том числе радиокнопки, переключатели и чекбоксы. В большинстве случаев это делается с помощью элемента <label> (FormControlLabel).
Когда метка не может быть использована, необходимо добавить атрибут непосредственно на поле ввода. В этом случае можно применить дополнительный атрибут (например, aria-label, aria-labelledby, title) через свойство inputProps.

<RadioButton
  value="radioA"
  inputProps={{ 'aria-label': 'Radio A' }}
/>

Стилизация input radio и checbox кнопок (на чистом CSS) – Di-Grand

Сегодня хочу поделится с вами несколькими вариантами стилизации input type=»radio» а так же input type=»checkbox» . Ни для кого не секрет, что без стилизации этих элементов не бывает жизни у верстальщиков. На своей практике я почти в каждом проекте встречаю кастомную стилизацию radio и checbox.

В интернете есть масса способов их стилизации, но большинство из них либо устарели, либо используют скрпты. Что в свою очередь увеличивает вес страницы. Это для SEO не есть хорошо. И так, давайте начнем, ниже я буду показывать вам готовые примеры стилизации input radio и checbox (на чистом css)

1. Стилизация radio кнопок

Данный способ подойдет тем, кому надо оформить radio в виде кнопок, без флажков и т.д.

Пример стилизации radio в виде кнопок, без флажков в реальном интернет магазине

See the Pen
Стилизация radio кнопок by Tom Johnson (@OwlThemes)
on CodePen.

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

Оформляем ваши checkbox флажки. Данный способ стилизирует сами флажки, думаю проблем разобраться у вас не будет. Для самого флажка checkbox используется svg картинка, для качественного отображения на retina экранах. Пример с рабочего сайта:

See the Pen
Стилизация checkbox by Tom Johnson (@OwlThemes)
on CodePen.

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

И последний вариант, это оформление radio флажков.

See the Pen
Стилизация radio флажков by Tom Johnson (@OwlThemes)
on CodePen.

UNLIMITED DOWNLOADS: 50+ Million WordPress & Design Assets

DOWNLOAD NOW

css — css input [type = radio] не будет работать в IE 11

У меня есть сделанная на заказ радиокнопка зеленого цвета. все хорошо работает и на хроме, и в IE11, кроме цвета. На хромированном экране цвет зеленый, как и планировалось, а на IE11 — черный.

Я прикрепил сюда CSS и HTML. вот мой HTML:

                        <div>
                            <span>Kitzva</span>
                            <input type="radio" />

                        </div>
                        <div>
                            <span>Itra</span>
                            <input type="radio" />
                            <asp:HiddenField runat="server" />

                        </div>

Css:

    /*EDIT RADIO BUTTONS*/

    /* When the radio button is checked, add a green background */
    input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        border: 2px solid #999;
        transition: 0.2s all linear;
        margin-right: 5px;
        position: relative;
        top: 4px;
    }

        input[type=radio]:checked {
            border: 6px solid #008053;
        }

    input[type="radio"]:focus {
        outline: 0px;
    }

Прилагается экран для печати: IE11: IE11 — проверено, IE11 — не проверено Chrome: Chrome — отмечено, Chrome — не проверено

Большое спасибо за поддержку.

Guy Ravnof

16 Мар 2021 в 15:18

2 ответа

Лучший ответ

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

input[type="radio"]:checked::-ms-check 
{
        border: 6px solid #008053;
        color: white;
}

Полный модифицированный код:

<!doctype html>
<html>
   <head>
      <title>demo</title>
      <style>
         /*EDIT RADIO BUTTONS*/
         /* When the radio button is checked, add a green background */
         input[type=radio] {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         border-radius: 50%;
         width: 16px;
         height: 16px;
         border: 2px solid #999;
         transition: 0.2s all linear;
         margin-right: 5px;
         position: relative;
         top: 4px;
         }
         input[type="radio"]:checked {
         border: 6px solid #008053;
         }
         input[type="radio"]:checked::-ms-check {
         border: 6px solid #008053;
         color: white;
         }
         input[type="radio"]:focus {
         outline: 0px;
         }
      </style>
   </head>
   <body>
      <div>
         <span>Kitzva</span>
         <input type="radio" />
      </div>
      <div>
         <span>Itra</span>
         <input type="radio" />
         <asp:HiddenField runat="server" />
      </div>
   </body>
</html>

Вывод в браузере IE 11:

Кроме того, вы можете попробовать изменить код в соответствии с вашими требованиями.

Deepak-MSFT
17 Мар 2021 в 02:06

IE не поддерживает внешний вид, ни с префиксом, ни без него. См. здесь.

Селектор атрибутов поддерживается начиная с IE 7.0. См. здесь.

Изменить: я действительно предлагаю вам изменить свой [type=radio] на [type="radio"]. Любой вариант подойдет, но последний больше соответствует стандартам.

Riedler
16 Мар 2021 в 12:35

Стилизация input radio и checbox кнопок (на чистом CSS)

1. Стилизация radio кнопок

Данный способ подойдет тем, кому надо оформить radio в виде кнопок, без флажков и т.д.

Пример стилизации radio в виде кнопок, без флажков в реальном интернет магазине

See the Pen
Стилизация radio кнопок by Tom Johnson (@OwlThemes)
on CodePen.

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

See the Pen
Стилизация checkbox by Tom Johnson (@OwlThemes)
on CodePen.

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

И последний вариант, это оформление radio флажков.

See the Pen
Стилизация radio флажков by Tom Johnson (@OwlThemes)
on CodePen.

Запись Стилизация input radio и checbox кнопок (на чистом CSS) впервые появилась Di-Grand.

Источник: https://di-grand.com/blog/it-poleznosti/4364-stilizatsiya-input-radio-i-checbox-knopok-na-chistom-css.html

HTML input type = «radio»

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

Пример

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

HTML

CSS

JavaScript

Попробуй сам »

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

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

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

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

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

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

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

Атрибут
type = «радио»	Есть	Есть	Есть	Есть	Есть

Синтаксис

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

Чистый CSS, настраиваемые радиокнопки

Это 18-й выпуск из серии, посвященной современным решениям CSS для проблем, которые я решал за последние 14 с лишним лет работы в качестве фронтенд-разработчика .

Используя комбинацию следующих свойств, мы можем создавать настраиваемые, кроссбраузерные, тематические, масштабируемые переключатели на чистом CSS:

currentColor для темы-способности
em единиц для относительного размера
радиальный градиент по сравнению с : до для : проверенный индикатор
Макет сетки CSS для выравнивания ввода и метки

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

Теперь доступно : мой яйцеголовый видеокурс Accessible Cross-Browser CSS Form Styling.Вы научитесь использовать методы, описанные в этом руководстве, на следующем уровне, создав систему дизайна форм с возможностью создания тематических форм, которая будет распространяться на все ваши проекты.

Radio Button HTML #

Существует два подходящих способа размещения переключателей в HTML.

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

   
  
 Текст метки радио

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

    Текст метки радио

Наша техника будет работать с любой настройкой, хотя мы собираемся выбрать метод обертывания метки, чтобы предотвратить включение лишнего div.

Базовый HTML-код для нашей демонстрации, включая классы и два радиомодуля, необходимый для тестирования : проверено и не проверено состояния — следующий:

   
  
  
   
  
  Radio 1  
    
  
  
   
  
  Radio 2  
 < / label>

Для групп переключателей также необходимо указать тот же атрибут name .

Вот как выглядят собственные HTML-элементы в Chrome:

Распространенные проблемы с встроенными кнопками радио #

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

В качестве примера приведем переключатели, показанные в версиях Firefox (слева), Chrome (в центре) и Safari (справа) для Mac:

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

Наше решение позволит достичь следующих целей:

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

Переменная темы и размер коробки

Сброс #

Есть два базовых правила CSS, которые должны быть сначала помещены в наш каскад.

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

 : корень {
 --color: rebeccapurple; 
}

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

  *, 
 *: до, 
 *: после {
 box-sizing: border-box; 
}

Стили этикеток №

Наш лейбл использует класс .radio . Базовые стили, которые мы включим сюда, — это размер шрифта и цвет . Напомним ранее, что font-size еще не повлияет на визуальный размер входного радио .

  .radio {
 font-size: 2.25rem; 
 цвет: var (- цвет); 
}

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

Наша метка также является контейнером макета для нашего дизайна, и мы собираемся настроить его для использования макета сетки CSS, чтобы воспользоваться преимуществом grid-gap .

  .radio { дисплей: сетка; 
 столбцов шаблона сетки: минимальное содержание автоматически; 
 сетка-зазор: 0,5 эм; 
}

Вот наш прогресс, зафиксированный в Chrome, когда инспектор показывает линии сетки:

`Пользовательский стиль радиокнопки #`

Хорошо, это та часть, ради которой вы сюда пришли!

Чтобы подготовиться к этому, мы обернули наш вход в span с классом radio__input .Затем мы также добавили span в качестве родственника input с классом radio__control .

Порядок здесь имеет значение, как мы увидим при стилизации для : проверено и : focus .

Хотели бы вы, чтобы подсказки CSS были в вашем почтовом ящике? Присоединяйтесь к моему информационному бюллетеню для получения обновлений статей, советов по CSS и внешних ресурсов!

`Шаг 1. Скройте собственный радиовход #`

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

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

  .radio__input {
 input {
 opacity: 0; 
 ширина: 0; 
 высота: 0; 
} 
}

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

`Шаг 2. Пользовательские неустановленные стили радио #`

Для нашего настраиваемого радио мы присоединим стили к диапазону класса radio__control , который является родственником после ввода.

Мы определим его как блочный элемент с размером em , чтобы сохранить его относительно font-size , примененного к метке. Мы также используем em для значения ширины границы , чтобы сохранить относительный вид. Good ole border-radius: 50% завершает ожидаемый внешний вид, визуализируя элемент в виде круга.

  .radio__control {
 дисплей: блок; 
 ширина: 1em; 
 высота: 1em; 
 border-radius: 50%; 
 граница: 0.1em сплошной currentColor; 
}

Вот наш прогресс после сокрытия исходного ввода и определения этих базовых стилей для настраиваемого радиоуправления:

Мм - что происходит с этим раскладом?

Несмотря на определение ширины и высоты из 0 , с поведением диапазона по умолчанию он все еще вычисляется как элемент с размерами.

Быстрое решение этой проблемы - добавить дисплей : flex к .radio__input диапазон, который обертывает собственный ввод и настраиваемый элемент управления:

  .radio__input {
 дисплей: гибкий; 
}

Flex учитывает размеры 0 , а пользовательский элемент управления появляется и действует как единственный элемент в .radio__input .

`Шаг 3. Улучшение ввода по сравнению с выравниванием этикеток #`

Если вы работали с сеткой или гибким боксом, то прямо сейчас вашим инстинктом может быть применение align-items: center для оптической настройки выравнивания ввода относительно текста метки.

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

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

Наш первый шаг - отрегулировать высоту строки в диапазоне класса .radio__label .

  .radio__label {
 line-height: 1; 
}

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

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

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

  .radio__control { преобразование: translateY (-0.05em); 
}

И с этим наше выравнивание является полным и функциональным как для однострочных, так и для многострочных этикеток:

`Шаг 4:`

: проверено State #

Мы используем непрозрачность : 0 сохранил собственный радио-ввод доступным для взаимодействия с клавиатурой, а также для взаимодействия щелчком / касанием.

Он также сохранил способность обнаруживать свое состояние : проверено с помощью CSS.

Помните, как я упоминал порядок вещей? Благодаря нашему настраиваемому элементу управления после собственного ввода, мы можем использовать соседнюю комбинацию братьев и сестер - + - для стилизации нашего настраиваемого элемента управления, когда собственный элемент управления - : проверено 🙌

`Вариант 1. Создание круга с радиальным градиентом`

Мы можем добавить радиальный градиент для классического внешнего вида закрашенного круга:

 .radio__input { вход {
 
  &: checked + .radio__control {
 background: radial-gradient (currentcolor 50%, rgba (255, 0, 0, 0) 51%); 
} 
} 
}

Вы можете настроить точку остановки градиента по своему усмотрению.

Обратите внимание на использование rgba для определения прозрачного цвета вместо ключевого слова transparent из-за проблемы с использованием transparent в градиентах для Safari, где он интерпретируется как «прозрачный черный» 👎

Вот гифка с результатом:

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

`Вариант 2: Создание круга с помощью`

: до

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

Преимущество этого метода в том, что он также доступен для анимации.

Сначала нам нужно изменить поведение .radio__control wrapping span:

  .radio__control {
 дисплей: сетка; 
 мест размещения: центр; 
}

Это самый быстрый способ выровнять : до по горизонтальному и вертикальному центру пользовательского элемента управления.

Затем мы создаем элемент : до , включая переход, и с помощью преобразования скрываем его с масштабом (0) :

  input + .radio__control :: before {
 content: ""; 
 ширина: 0,5 мкм; 
 высота: 0,5 мм; 
 box-shadow: вставка 0.5em 0.5em currentColor; 
 border-radius: 50%; Переход 
: легкость преобразования 180 мс; 
 преобразование: масштаб (0); 
}

Использование box-shadow вместо background-color позволит видеть состояние радио при печати (h / t Alvaro Montoro).

Наконец, когда вход равен : проверено , мы делаем его видимым в масштабе (1) с красиво анимированным результатом благодаря переходу :

  ввод: проверено + .radio__control :: before {
 transform: scale (1); 
}

А вот гифка результата с использованием анимированного элемента : до :

`Шаг 5:`

: focus State #

Для состояния : focus мы собираемся использовать двойной box-shadow , чтобы усилить currentColor , но обеспечить различие между базовой настраиваемой радиокнопкой и стилем : focus .

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

  .radio__input { вход {
 
  &: focus + .radio__control {
 box-shadow: 0 0 0 0,05em #fff, 0 0 0,15em 0,1em currentColor; 
} 
} 
}

Порядок определений box-shadow соответствует их слоям, причем первое определение равно «верхнему» слою. Это означает, что в этом правиле мы сначала создаем видимость тонкой белой границы, которая появляется над растушеванной тенью, которая принимает значение из currentColor .

Вот гифка для демонстрации : focus Внешний вид:

И на этом основные стили для настраиваемой радиокнопки готовы! 🎉

`Экспериментальный: использование`

: focus-within для стилизации текста метки #

Поскольку метка не является родственником собственного ввода, мы не можем использовать состояние : focus ввода для его стилизации.

Предстоящий псевдоселектор : focus-within , и одна из особенностей заключается в том, что он может применять стили к элементам, содержащим элемент, получивший фокус.

Эпизод ModernCSS о раскрывающемся меню навигации, доступном на чистом CSS, также охватывал : focus-within .

На данный момент : focus-within требует полифилла, поэтому следующие стили следует рассматривать как усовершенствование, а не на них как на единственный способ обеспечить визуальную индикацию фокуса.

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

 .переход radio__label {
: 180 мс при полном вводе и выводе; 
 непрозрачность: 0,8; 
}

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

Затем мы проверим фокус, добавив правило для : focus-within на этикетке ( .radio ). Это означает, что когда собственный ввод, который является потомком и, следовательно, находится «внутри» метки, получает фокус, мы можем стилизовать любой элемент внутри метки, пока фокус активен.

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

  .radio { &: focus-within {
 .radio__label {
 transform: scale (1.05); 
 непрозрачность: 1; 
} 
} 
}

Использование шкалы () предотвращает влияние изменения размера на поток элементов и появление дрожания. Переход делает это красиво и плавно, как видно на этом гифке:

.

`Демо №`

Вот решение в целом: первая радиостанция демонстрирует состояние : проверено с использованием радиального градиента , а вторая демонстрирует использование : до :

Стефани Эклс (@ 5t3ph)

Ознакомьтесь с настраиваемым стилем флажка, чтобы также узнать, как расширить стили до состояния : отключено , и узнать, как работать с SVG как с индикатором : проверено .

`Стилизация флажков и переключателей с использованием CSS`

Стилизация флажков и переключателей стала возможной с введением псевдокласса: checked в CSS3. На этой странице описаны два метода: метод на основе изображений, показанный в демонстрации ниже, и метод чистого CSS.

`Скачать примеры`

Архивы ниже содержат два набора файлов примеров, демонстрирующих методы стилизации на основе изображений и чистый CSS, описанные на этой странице.

`Стиль на основе изображений`

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

Для каждого флажка или переключателя используется HTML следующей формы:

  
  
   Значение

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

Мы скрываем флажки и переключатели в таблице стилей:

  ввод [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ширина: 28 пикселей;
  маржа: 0;
  отступ: 0;
  непрозрачность: 0;
}

Селекторы в строках 1 и 2 используют псевдокласс отрицания, чтобы скрыть правило от старых браузеров.Строки 3–5 устанавливают ширину, поля и отступы, чтобы можно было точно позиционировать альтернативную графику. Строка 6 устанавливает прозрачность, чтобы сделать стандартный пользовательский интерфейс невидимым.

Затем мы размещаем метку и отображаем непроверенное изображение:

  ввод [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  дисплей: встроенный блок;
  маржа слева: -28 пикселей;
  отступ слева: 28 пикселей;
  фон: url ('проверяет.png ') без повтора 0 0;
  высота строки: 24 пикселя;
}

Строка 3 устанавливает метку для отображения как встроенный элемент блока, позволяя строке 7 установить ее высоту равной высоте альтернативной графики и центрировать текст по вертикали. В строке 4 используется отрицательное поле, чтобы закрыть пространство, в котором будет отображаться стандартный пользовательский интерфейс, а в строке 5 затем используется заполнение, чтобы восстановить текст метки в правильном положении. Значение 28 пикселей, используемое здесь и в предыдущем правиле, равно ширине изображения плюс некоторый дополнительный отступ, чтобы текст метки не располагался слишком близко к изображению.Строка 6 отображает непроверенное изображение в пространстве перед текстом метки.

Наконец, мы отображаем выбранные изображения, когда установлены флажки и переключатели:

  input [type = checkbox]: not (old): checked + label {
  background-position: 0 -24px;
}

input [type = radio]: not (old): checked + label {
  фоновая позиция: 0 -48 пикселей;
}

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

`Чистый стиль CSS`

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

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

  
  
       Значение

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

Мы скрываем флажки и переключатели в таблице стилей:

  ввод [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ширина: 2em;
  маржа: 0;
  отступ: 0;
  размер шрифта: 1em;
  непрозрачность: 0;
}

Этот метод такой же, как и в методе на основе изображений, но поскольку ширина устанавливается относительно размера шрифта в строке 3, мы должны восстановить размер шрифта в строке 6, поскольку браузеры используют меньший размер шрифта для флажков и переключателей с помощью дефолт.

Затем мы размещаем метку:

  ввод [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  дисплей: встроенный блок;
  маржа слева: -2em;
  высота строки: 1.5em;
}

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

Затем мы стилизуем первый диапазон, чтобы создать непроверенную графику:

  input [type = checkbox]: not (old) + label> span,
input [type = radio]: not (old) + label> span {
  дисплей: встроенный блок;
  ширина: 0.875em;
  высота: 0,875em;
  маржа: 0,25em 0,5em 0,25em 0,25em;
  граница: 0,0625 мкм, сплошной RGB (192,192,192);
  радиус границы: 0,25 м;
  фон: rgb (224 224 224);
  фоновое изображение: -moz-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -ms-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -o-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -webkit-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: линейный градиент (RGB (240,240,240), RGB (224,224,224));
  вертикальное выравнивание: снизу;
}

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

В этом примере градиент фона меняется на противоположный для выбранных флажков и переключателей:

  input [type = checkbox]: not (old): checked + label> span,
input [type = radio]: not (old): checked + label> span {
  фоновое изображение: -moz-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -ms-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -o-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -webkit-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: линейный градиент (RGB (224,224,224), RGB (240,240,240));
}

Затем мы отображаем галочку внутри выбранных флажков:

  input [type = checkbox]: not (old): checked + label> span: before {
  содержание: '✓';
  дисплей: блок;
  ширина: 1em;
  цвет: rgb (153 204 102);
  размер шрифта: 0.875em;
  высота строки: 1em;
  выравнивание текста: центр;
  тень текста: 0 0 0,0714em rgb (115,153,77);
  font-weight: жирный;
}

Селектор в строке 1 использует псевдокласс: before, поэтому в строке 2 можно вставить символ галочки внутри элемента span. В строках 3, 4, 6, 7 и 8 галочка отображается в центре элемента, а в строках 5, 9 и 10 делается стиль текста.

Наконец, мы отображаем «маркер» внутри выбранных переключателей, применяя те же методы, что и для непроверенной графики, ко второму элементу диапазона:

  input [type = radio]: not (old): checked + label> span> span {
  дисплей: блок;
  ширина: 0.5em;
  высота: 0,5 мм;
  маржа: 0,125 эм;
  граница: 0,0625 мкм сплошной RGB (115,153,77);
  радиус границы: 0,125 м;
  фон: rgb (153 204 102);
  фоновое изображение: -moz-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -ms-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -o-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -webkit-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: линейный градиент (RGB (179 217 140), RGB (153 204 102));
}

`Стилизация радиокнопок с помощью CSS (59 пользовательских примеров)`

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

Настоящие радио-кнопки послужили вдохновением для термина "радио-кнопка". У старых радиоприемников были кнопки, которые выскакивали при нажатии другой.

Чтобы найти определенные кнопки, соответствующие стилю веб-сайта, CodePen - отличное место для начала. Эта статья, созданная нашей командой, стоящей за Slider Revolution, предоставляет фрагменты стилей переключателей, которые вы можете использовать в своих проектах.

`Кнопки радио CSS`

Первый выбор - классический и простой дизайн от Тристана Уайта. Стиль, шрифт и цвет фона очень просты, но имеют все основные функции. Полный чистый код доступен в CSS и HTML, но не в JS.

Доступны три варианта кнопок. При выборе кнопка выделяется цветом заливки.

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

`Pure CSS - кнопки выбора радио SVG`

Этот стиль радиокнопок создал Никки Пантони. Он доступен в CSS и SVG. JS не нужен.

`Селектор треугольника управления проектами`

Джей построил Селектор Треугольника Управления Проектами.

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

`Радиокнопки из мрамора и дерева`

Эти кнопки, созданные Джоном Кантнером, имеют другой стиль. Анимированный селектор выглядит как китайские шашки на деревянной доске.

`Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода`

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

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

CSS Radio-button на 147-й - это радио-кнопки CSS. Они выделяются своим разным стилем.

В качестве фона разработчик использовал дизайн карточного стола для размещения кнопок. Функционирование кнопок очень простое. Посетитель сайта может одновременно нажимать только одну кнопку.

Весь дизайн акцентирует внимание на анимированных кнопках.

Код избегает использования JS и вместо этого написан на расширенных CSS и HTML.Благодаря этому шаблон легче понять и с ним работать.

Ссылка выше показывает код и дает дополнительную информацию.

`Google Dots Radio Buttons`

Google Dots Radio Buttons предоставляет четыре способа настройки переключателей. Разработчик этого набора кнопок - Виктор Фрейре.

Выбор одной из кнопок выделен обычной белой заливкой. Но что делает эти кнопки такими особенными, так это анимация. Каждая из кнопок ритмично подпрыгивает вверх и вниз.

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

`Пользовательская радиокнопка SCSS3 - Радиосплозия`

Разработано и разработано Sodapop.

Это нестандартная радиокнопка. Дизайн и анимация добавляют что-то особенное. Щелкните ссылку для демонстрации.

`Пользовательские флажки / радиокнопки`

Помимо набора флажков CSS, Сэм предлагает набор переключателей.Кнопки CSS работают только в Chrome, но оригинальные кнопки работают в других браузерах.

`HTML-кнопки радио`

Эти кнопки HTML, созданные Саумитрой Бозе, выполняют свое основное назначение. При нажатии одной из радиокнопок открывается окно с дополнительной информацией.

`Адаптивный тумблер`

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

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

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

`Кнопка радио Nerf Gun`

Поначалу это выглядит как одна из многих других доступных радиокнопок. Но анимация выбора делает этот дизайн Olivia Ng особенным. Это выделит любой веб-сайт.

`НЕЙМОРФИЧЕСКОЕ РАДИО`

Halvves разработали этот набор кнопок.Изменение затенения показывает выбранный параметр. Простой и стильный дизайн.

`Переключатель шлепка`

Ярив Фруенд. Переключатель пощечины - это еще один вариант переключателя CSS.

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

Анимация также обеспечивает визуальную индикацию изменения выбора. Эффект «пощечину и прыгай» делает его более интересным и привлекательным для просмотра.Это будет развлекать посетителей сайта.

`Переключатель улыбки`

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

Это анимированный индикатор настроения. Переключатель - это смайлик, который переходит в «забавную» или «плохую» сторону. В зависимости от выбранной стороны вид смайлика меняется.

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

Чтобы дать обратную связь, радио-кнопка может быть немного утомительной. Но этот «измеритель настроения» делает вещи интересными и интересными. В результате вы с большей вероятностью получите обратную связь.

`Кнопки радио с воздушным шаром`

Крис Симари добавил несколько скинов для переключателей. Это придает им другой и более интересный вид.

`UI // Радиокнопка`

Радиокнопка пользовательского интерфейса представляет собой серию кнопок с добавленной анимацией, чтобы придать дополнительный эффект.Дизайн Козимо Скарпа.

`Radio Hopping`

На этих анимированных кнопках Джона Кантнера точка выделения перескакивает от одного выделения к другому.

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

Эти кнопки CSS подходят для углубленных опросов. Инноватор, стоящий за ними, Тобиас Больоло, создал эти переключатели, чтобы добавить творчества на веб-сайт. Добавление этих элементов произведет впечатление на посетителей.

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

`Radio Selects: Flexbox и Fun`

Radio Selects - это работа Адама Кларка в стадии разработки. Интерфейс и внешний вид этих переключателей CSS напоминают многие игры.

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

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

`Радиокнопка Dot-Slider`

Брэндон МакКоннелл создал этот слайдер диапазона. Линии соединяют опции, и изменение выбора перемещает точку индикатора. Он хорошо подходит для обозначения диапазонов.

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

`Список переключателей`

Рядом со списком опций находится ползунок. Пользователи управляют ползунком, наводя курсор и щелкая мышью. Этот вариант переключателей написан на CSS3.

`2 элемента 1 стильное радио`

Простые и серьезные анимированные и стилизованные радиокнопки от Тобиаса Харисон Денби. Написано только на HTML и CSS, JS не требуется.

`Радиокнопки в виде таблеток`

Радиокнопки с четким крупным шрифтом, разработанные Havard Brynjulfsen.Он использует только CSS (SCSS) и применяет одноуровневые селекторы и псевдокласс: checked.

`Анимированный переключатель для радиокнопки`

Фредрик Йенсен сделал этот понятный и привлекательный анимированный переключатель CSS. Дизайн дает пользователю много возможностей для настройки.

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

`2020 Переключает`

Аарон Икер предлагает свой набор переключателей. Он также включает переключатели и набор флажков CSS. При необходимости доступны также деактивированные версии, заштрихованные серым.

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

Эти переключатели не используют стандартный дизайн закрашенного круга. Вместо этого Дронка Рауль сделал настраиваемые кнопки, которые обозначают выбор с помощью галочки. Только зависит от CSS.

`Радиокнопка Big Square`

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

`Палитра цветов радио`

Разработано The Bearded Wonder.

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

Перейдите по ссылке, чтобы узнать больше о кнопках, коде и разработчике.

`Превосходная кнопка переключения`

Эти кнопки, сделанные Андреем, представляют собой тумблеры. Он имеет анимированные изменения выбора. Изменение цвета и значок также указывают на выбор.

`Вариант чистого CSS`

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

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

Арон написал параметры на чистом CSS.

`Bulgy Радио`

Лиам использовал JS в своем коде для Bulgy Radios. Анимация смены выбора яркая и продуманная.

`Закуски? Плоские входы радиокнопок…`

Эти стилизованные радиокнопки просты и понятны. Им можно управлять с помощью мыши или клавиатуры.

`Кнопка радио Jelly`

Томассо Полетти сделал эту простую и веселую пуговицу.Он использовал только Vanilla CSS для написания кода.

`Анимация пульсации на типе ввода Радио и флажке`

Радиокнопка и флажок с анимацией пульсации, сделанный Уайлдером Тайпе.

`Плоское радио - Да / Нет`

Сделано Мэтью Блодом.

Кнопка «Да / Нет», аналогичная «Стилизованным радио-кнопкам» Нейта Уайли. Как следует из названия, эти кнопки плоские. Цвета кнопок $ красный, $ синий и $ зеленый можно регулировать.

`Полностью CSS: настраиваемые флажки, переключатели и поля выбора`

Пользовательские переключатели, поля выбора и флажки, автор Kenan Yusuf.

`Отдых: Переключатель карточных тем`

Эти радиокнопки, разработанные Дином Хидри, имеют тему кредитных карт. Каждая кнопка позволяет выбрать свой цвет. Приятная анимация сопровождает изменение выбора.

`Переключить радио-вход с помощью метки`

Переключатели переключателей от Андрея Верещака используют HTML, CSS и JS. Кнопки простые, но дополнительное преимущество в том, что их несколько.

Иногда одного вопроса недостаточно.В этом варианте две одинаковые коробки расположены рядом.

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

`Анимированные кнопки радио в формате SVG`

Анимированные переключатели SVG от Андрея Шарапова используют CSS. Выбор дает ожидаемые кнопки с заливкой и четкое изменение цвета.

`Просто очень простые радиокнопки`

Самая основная из радиокнопок точно соответствует определению.Хотя они и являются базовыми, они также наиболее эффективны. Их спроектировала и разработала Памела Дэйн.

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

Разработчик решил использовать самый простой и чистый код HTML и CSS. Так что пользоваться им очень просто. Его можно скопировать и вставить на любой сайт.

Радиокнопка

`Liquid с использованием SVG и GSAP`

Эта анимированная кнопка в формате SVG от Райана Лабара особенная и стильная.Анимация также элегантна и хорошо работает.

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

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

`Радиовход`

Стильный и чистый вариант от Håvard Brynjulfsen.Он использует псевдокласс: checked.

`Подземные радиостанции`

Радиокнопка, тема которой - путешествие под землей. Сделал Микаэль Айналем.

`Жидкостная радиокнопка`

Набор кнопок, похожих на Liquid Radio Buttons от Райана Лабара. Эти кнопки, созданные Тамино Мартиниусом, используют похожую анимацию. Код написан на простом CSS.

`Зачеркнутые радиостанции`

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

`Материал Радиокнопка`

CODEARMADA является дизайнером этого дизайна радио-кнопки. И CSS, и JS использовались для достижения желаемых эффектов.

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

`Входное радио HTML`

Стилизация радиокнопок, разработанная Андреасом Стормом.После выделения следует анимация загрузки границы и заливки.

`Концепция выбора радио ввода только для CSS`

Изготовлено веб-тики.

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

`Переключатель стилей CSS`

При наведении курсора на опцию она выделяется привлекательным цветом.Анджела Веласкес придумала этот стильный дизайн.

`Радиокнопка Google Maps`

Сделано с использованием HTML и CSS, что обеспечивает быструю загрузку. Он использует значки Google Maps для вождения, ходьбы или езды на велосипеде. Таким образом, они хорошо работают в сочетании с настраиваемой картой или трекером местоположения.

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

`Чистый CSS Fancy Checkbox / Radio`

Эти кнопки создал Рауль Баррера. Необычные и гибкие переключатели и флажки. Коды HTML и CSS простые и короткие.

`Необычные флажки и переключатели`

Необычные переключатели и флажки CSS, сделанные Jase. Настраиваемый и сделанный с использованием шрифта Awesome.

`Расчетная форма`

Роза разработала эти переключатели в стиле касс.По ссылке три набора кнопок.

`Стиль радиокнопки`

Радиокнопки CSS и HTML в стиле Мортена Олсена.

`Цепь радиокнопки`

LukasOe сделал эти переключатели схем в стиле HTML и CSS. Такой дизайн обязательно привлечет внимание зрителя.

`Флажок и радио-кнопки`

Флажок темы macOS в темном режиме и переключатели. Простой дизайн, созданный Андреасом Стормом.

`Вход и радиокнопка`

Это сделала Офелия Фурнье-Лафламм. В этом дизайне для обозначения выбора используется сферический контур вокруг кнопки. Сделано с помощью HTML и CSS.

`Конец мысли о стилизации радиокнопок с помощью CSS`

Радиокнопки являются элементами многих веб-сайтов. Это нормально, если они используются на страницах, где необходимо заполнение форм.

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

Раньше радиокнопки были только функциональными. Кнопки по умолчанию теперь считаются слишком скучными и не очень привлекательными.

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

Однако одно предостережение. Радиокнопки следует использовать по назначению.

Благодаря расширенным возможностям CSS, пользователь может видеть, что было выбрано. Это предотвращает отправку и получение неверных данных.

Если вам понравилась эта статья о стилях переключателей, вы должны проверить эту с примерами временной шкалы CSS.

Мы также писали на похожие темы, такие как примеры галереи CSS, фрагменты календаря HTML, примеры ввода текста CSS, аккордеон CSS, анимированный фон CSS и примеры анимации CSS.

`88 Radio Buttons CSS`

Коллекция HTML и CSS radio button Примеры кода : custom, multiple и radio button group .Обновление коллекции за март 2020 года. 11 новинок.

Bootstrap Radio Buttons
Флажки CSS
Тумблеры CSS

`Буквальные радиокнопки`

Радиокнопки превратились в радиокнопки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Абубакер Саид
1 мая 2020 г.

`О коде`

`Пользовательские переключатели CSS`

Доступные настраиваемые переключатели только с CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Håvard Brynjulfsen
19 апреля 2020

`О коде`

`Радиокнопки в виде таблеток, полностью масштабируемые`

Пользовательский стиль переключателя, использующий только CSS (SCSS), используя преимущества родственных селекторов и псевдо-класса : checked .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Андреас Сторм
23 марта 2020

`Автор`

Милан Раринг
22 февраля 2020

`О коде`

`Анимация радиокнопок - только CSS`

Простая анимация радиокнопок - только CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Джон Кантнер
11 февраля 2020

`О коде`

`Радиокнопки из мрамора и дерева`

Взаимодействие с переключателями в виде китайских шашек на деревянной доске.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`О коде`

`Неуморфное радио`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

`Автор`

Джон Кантнер
22 января 2020

`О коде`

`Radio Hopping`

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Аарон Икер
11 января 2020

`О коде`

`2020 Переключает`

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`О коде`

`Bulgy Радио`

Еще одна чрезмерно проработанная радио-анимация.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

`Автор`

Дин Хидри
28 апреля 2019

`О коде`

`Переключатель тем для карточек`

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

`Автор`

Абубакер Саид
16 апреля 2019

`О коде`

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

`Автор`

Иван Гроздич
9 апреля 2019 г.

`О коде`

`Радиокнопки на чистом CSS (Темный / Светлый)`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootstrap.css, unicons.css

`Автор`

Брэндон МакКоннелл
27 марта 2019

`О коде`

`Готовься`

Брэндон МакКоннелл

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

`Автор`

Андрей Шарапов
28 февраля 2019

`О коде`

`Анимированные кнопки радио в формате SVG`

Анимированные переключатели SVG с использованием CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

`Автор`

Микаэль Айналем
15 января 2019

`О коде`

`Подземные радиокнопки`

Выделение радиокнопки перемещается под землю.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Брэндон МакКоннелл
22 октября 2018

`О коде`

`Селективная кнопка на чистом CSS с точкой-ползунком`

Ползунок с перемещением по диапазону, точечным индикатором, метками, стилем с условием действительности и без JS.Работает на 100% на сайтах с ограниченным доступом к JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Бенджамин Келер
18 октября 2018 г.

`О коде`

`Кнопки мобильного радио с небольшой анимацией`

Мобильные радиокнопки как настоящие кнопки, простой внешний вид с небольшой анимацией.Легко использовать и обрабатывать.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`О коде`

`Необычные флажки и радиокнопки`

Необычные флажки и переключатели с Font Awesome.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

`Автор`

Дронка Рауль
6 августа 2018

`О коде`

`Взаимодействие с радиокнопками`

Взаимодействие радиокнопок с HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`О коде`

`Радиовход`

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Андреас Сторм
13 июня 2018

`О коде`

`Флажок и радио-кнопки`

Флажок и переключатели

macOS Mojave dark mode.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

`☑️ Переключатели трансформации, будут меняться ☑️`

Версия Flexbox Toggles только для преобразования для сравнения производительности и кода. Это идет немного дальше с будет заменять на масляно-гладкую анимацию без перерисовок.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

`Автор`

Бадди Рино
12 сентября 2017

`О коде`

`Радиогруппы, вдохновленные материалами`

Радиогруппы HTML и CSS.

`Автор`

Андрей Верещак
03.08.2017

`Сделано с использованием`

HTML
CSS / SCSS
JavaScript (jQuery.js, bootstrap.js, slick.js)

`О коде`

`Переключить вход радио`

Переключить вход радио с меткой.

`Автор`

Тобиас Больоло
07.07.2017

`Сделано с использованием`

HTML
CSS
JavaScript (jQuery.js)

`О коде`

`Обзор пользовательских радиокнопок`

Обзор пользовательских переключателей с помощью jQuery.

`Автор`

Репета Александр
30.06.2017

`О коде`

`Стилизация радиокнопок`

Радиокнопки стиля чистого CSS.

`Сделано с использованием`

HTML
CSS / SCSS
JavaScript (jQuery.js, TweenMax.js)
SVG

`О коде`

`Жидкостная радиокнопка`

Переключатель Liquid с использованием SVG и GSAP (GreenSock).

`Автор`

Тамино Мартиниус
02.06.2017

`О коде`

`Жидкостная радиокнопка`

Радиокнопка Liquid с SVG.

`О коде`

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

Пользовательские переключатели HTML и CSS.

`О коде`

`Цепь радиокнопки`

Схема радиокнопки с HTMl и CSS.

Демонстрационное изображение: Jelly Radio Button

`Jelly Radio Button`

Закрепленная радиокнопка. Наслаждайтесь этим простым и плоским дизайном радиокнопки только на ванильном CSS 🙂 Сделано Томмазо Полетти 9 февраля 2017 г.

Демо-изображение: скрытые радиосообщения / всплывающие подсказки

`Скрытые радиосообщения / всплывающие подсказки`

Скрытые радиосообщения / всплывающие подсказки в HTML и CSS. Сделано Джошуа Уордом 6 января 2017 г.

Демонстрационное изображение: Анимация пульсации на радио и флажке типа ввода

`Анимация пульсации на радио типа ввода и флажке`

Анимация пульсации HTML и CSS на переключателе типа ввода и флажке. Сделано WILDER TAYPE 27 декабря 2016 г.

Демонстрационное изображение: CSS Radio Buttons

`CSS Radio Buttons`

Простая и элегантная радиокнопка CSS. Сделано Тристаном Уайтом 13 декабря 2016 г.

Демонстрационное изображение: Радиогруппа с использованием меток

`Радиогруппа с использованием меток`

Радиогруппа с использованием меток с HTML и CSS. Сделано Сэмом Кедди 5 декабря 2016 г.

Демонстрационное изображение: Radio Button Big Square

`Radio Button Big Square`

Радиокнопка на чистом CSS, большой квадрат. Сделано Габриэлем Феррейрой 12 ноября 2016 г.

Демонстрационное изображение: анимированный флажок и радио-кнопки

`Анимированный флажок и радио-кнопки`

Анимированные флажки и переключатели только для CSS. Изготовил Коля Кучера 12 октября 2016 г.

Демонстрационное изображение: Radio Selects

`Radio Selects`

Радио выбирает: флексбокс и прикол. Сделано Адамом Кларком 17 августа 2016 г.

Демо-изображение: Checkout Form

`Checkout Form`

Форма оформления заказа с использованием стилизованных переключателей. Сделано Rosa 16 июля 2016 г.

Демонстрационное изображение: Радиокнопки SVG Splat

`Радиокнопки SVG Splat`

Переключатели для HTML, CSS и SVG splat. Сделано Крисом Гэнноном 18 июня 2016 г.

Демонстрационное изображение: Radio Buttons

`Radio Buttons`

Открывайте разные окна, щелкая переключатели. Сделано Саумитрой Бозе 1 июня 2016 г.

Демонстрационное изображение: Концепция выбора радио только для CSS

`Концепция выбора радио только для CSS`

Тестирование концепции выбора входного радио с помощью анимированного слайда, чтобы узнать, какой из них выбран. Сделано в web-tiki 9 мая 2016 г.

Демонстрационное изображение: вход и радио-кнопка

`Вход и радио-кнопка`

Чистый ввод CSS и переключатель. Автор Офелия Фурнье-Лафламм 27 апреля 2016 г.

Демонстрационное изображение: очень простые радиокнопки

`Очень простые радиокнопки`

HTML и CSS просто очень простые переключатели. Сделано Памелой Дайн 17 апреля 2016 г.

Демонстрационное изображение: Флажок "Чистый CSS Fancy" / Радио

`Флажок "Чистый CSS Fancy" / Радио`

Необычный флажок / радио-кнопки с небольшим переходом, наслаждайтесь! Сделано Раулем Баррерой 11 апреля 2016 г.

Демо-изображение: Google Dots Radio Buttons

`Google Dots Radio Buttons`

4 различных способа простой настройки переключателей. Сделано Виктором Фрейре 5 марта 2016 г.

Демонстрационное изображение: Анимированный переключатель для радиокнопок

`Анимированный переключатель для радиокнопок`

CSS только анимированная сборка переключателя с радио-кнопками. Сделано Фредриком Йенсеном 23 января 2016 г.

Демонстрационное изображение: Переключатель материала

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

Радиокнопка «Материал» с HTML, CSS и JavaScript. Сделано CODEARMADA 14 января 2016 г.

Демо-изображение: Радиокнопки Google Maps Только CSS

`Радиокнопки Google Maps Только CSS`

Радиокнопки, стилизованные под настоящие кнопки. Только CSS. Сделано Элиасом Мейре 7 декабря 2015 г.

Демо-изображение: Simple Toggle

`Simple Toggle`

Простая кнопка переключения. Сделано Домиником Магнифико 28 сентября 2015 г.

Демонстрационное изображение: Radio Button CSS

`Radio Button CSS`

Простой стиль ввода радио. Sass - это путь! Сделано Лоренцо Д'Ианни 25 сентября 2015 г.

Демонстрационное изображение: Необычная радиокнопка

`Необычная радиокнопка`

Необычный переключатель, похожий на флажок. Сделано Стейси 17 сентября 2015 г.

Демонстрационное изображение: Пользовательский переключатель CSS3

`Пользовательский переключатель CSS3`

Переключатель "Пользовательский HTML и CSS". Сделано sodapop 4 сентября 2015 г.

Демонстрационное изображение: флажок CSS Ripple / Wave и переключатель

`CSS Ripple / Wave Checkbox и переключатель`

Анимируйте проверку и снятие флажка с помощью SASS и Bourbon. Сделано Мэттом Систо 21 августа 2015 г.

Демонстрационное изображение: Масштаб ввода радиокнопки

`Масштаб ввода радиокнопки`

Переосмысление радиокнопок. Это основано на распространенных ответах опросов «никогда, иногда, часто, обычно, всегда».« Сделано Калебом Дуреном 2 августа 2015 г.

Демонстрационное изображение: стильные радиокнопки

`Стильные радиокнопки`

CSS только стильные радиокнопки. Сделано Саймоном Бьюиссоном 31 июля 2015 г.

Демонстрационное изображение: Стиль радиокнопки

`Стиль радиокнопки`

Стили переключателей HTML и CSS. Сделано Мортеном Олсеном 16 июня 2015 г.

Демонстрационное изображение: Переключатель стилей CSS

`Переключатель стилей CSS`

Уловки, придающие стиль переключателю. Сделано Анжелой Веласкес 26 мая 2015 г.

Демонстрационное изображение: Strikethrough Radios

`Strikethrough Radios`

Эксперимент по зачеркиванию частей предложения как способ взаимодействия с радиовходами ... Сделано Эдом Хиксом 23 апреля 2015 г.

Демонстрационное изображение: Radio Input

`Radio Input`

Простой радио-ввод с использованием псевдо-класса: checked. Сделано Ховардом Бриньюлфсеном 15 апреля 2015 г.

Демонстрационное изображение: плоские входы для радиокнопок

`Плоские входы для радиокнопок`

Стилизованные переключатели, которые по-прежнему позволяют ввод с клавиатуры (по крайней мере, в Chrome). Автор Крис Хедстром 4 апреля 2015 г.

Демонстрационное изображение: Radio Control

`Radio Control`

Это перо используется в статье SitePoint - Тематика элементов формы с помощью Sass. Сделано SitePoint 31 марта 2015 г.

Демонстрационное изображение: Radio Buttons

`Radio Buttons`

Нет JS, нет img, полный em, редактируемый текст (гибкий). Автор Джонатан Левайян 29 января 2015 г.

Демо-изображение: Плоское радио - Да / Нет

`Плоское радио - Да / Нет`

На основе пера Нейта Уайли "Стилизованные радиокнопки".Аналогичная концепция, но с плоским дизайном. Поиграйте с цветовыми переменными ($ красный, $ синий, $ зеленый), чтобы настроить цвета кнопок. Сделано Мэтью Блодом 27 октября 2014 г.

Демо-изображение: Awesome Toggle Button

`Awesome Toggle Button`

Две очень красивые радиокнопки, соединенные вместе как тумблер. Сделано Эндрю 7 октября 2014 г.

Демо-изображение: Стиль с проверкой радио

`Стиль с проверкой на радио`

Проверено радио стиля. Потрясающие. Сделано Фолькером Отто 30 сентября 2014 г.

Демо-изображение: 2 элемента 1 стильное радио

`2 элемента 1 стильное радио`

Чистый HTML / CSS анимированные и стилизованные радиокнопки с меткой (дополнительные элементы не требуются). Сделано Тобиасом Харисоном, Denby 8 сентября 2014 г.

Демонстрационное изображение: Кнопки радио с воздушным шаром

`Кнопки радио с воздушным шаром`

Облегчены некоторые переключатели, чтобы придать им повышенный эффект. Сделано Крисом Симари 26 июля 2014 г.

Демо-изображение: пользовательские флажки / переключатели

`Пользовательские флажки / переключатели`

Пример некоторых простых настраиваемых флажков и переключателей, созданных с помощью чистого CSS.Они работают только в хроме, но используются в других браузерах. Сделано Сэмом 7 июля 2014 г.

Демо-изображение: упругие кнопки радио!

`Надувные радиокнопки!`

Радиокнопки с HTML и CSS. Сделано Джо Рингенбергом 19 июня 2014 г.

Демо-изображение: Простая радиогруппа с использованием CSS3

`Простая радиогруппа с использованием CSS3`

Простая радиогруппа с использованием CSS3. Сделал Игорь Амадо 16 мая 2014 г.

Демонстрационное изображение: Radio Buttons

`Radio Buttons`

Радиокнопки HTML и CSS. Сделано Мастером Белого Волка 19 февраля 2014 г.

Демонстрационное изображение: Cool Radio Buttons

`Cool Radio Buttons`

Переключатель HTML и CSS. Сделано Эриком Роггом 20 ноября 2013 г.

`30+ стилей переключателей CSS из CodePen 2018`

Радиокнопка или флажок HTML и CSS, являющиеся неотъемлемой частью большинства форм, должны использоваться правильно. Используя CSS для их улучшения, они могут предотвратить отправку неверных данных пользователями, указав, какая из них выбрана в данный момент.

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

Когда я пытаюсь выбрать определенный стиль радиокнопки, одно из моих любимых мест - CodePen. Итак, вот список переключателей CSS, который я составил, чтобы вы начали.

`Google Dots Radio Buttons`

Четыре разных способа простой настройки переключателей.

См. Перо Google Dots Radio Buttons от victorfreire (@victorfreire) на CodePen.

`Переключатель шлепка`

Аккуратный эффект анимации откидных створок с помощью переключателей.

См. Тумблер Pen Slap от YarivFrd (@YarivFrd) на CodePen.

`Radio Selects: Flexbox & Fun`

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

См. Pen Radio Selects: Flexbox & Fun от adamstuartclark (@adamstuartclark) на CodePen.

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

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

См. Настраиваемые радиокнопки пера от rauldronca (@rauldronca) на CodePen.

`Анимация пульсации для типа ввода Радио и флажка`

Анимация пульсации на радио и флажке типа ввода. Подробнее https://goo.gl/VoFJrw

См. Раздел «Анимация пульсации пера на радио и флажке типа ввода» от wilder_taype (@wilder_taype) на CodePen.

`Переключить радио-вход с помощью метки`

Классные эффекты увеличения и уменьшения масштаба для прямоугольных переключателей с использованием JS и CSS.

См. Радио-ввод переключателя пера с меткой от JoyZi (@JoyZi) на CodePen.

`Просто очень простые радиокнопки`

Эффект переключателя 3D с использованием простого CSS.

См. Pen Just Very Simple Radio Buttons от pamdayne (@pamdayne) на CodePen.

`Кнопки радио CSS`

Простая и элегантная радиокнопка CSS.

См. Радио-кнопки Pen CSS от triss90 (@ triss90) на CodePen.

`Переключение улыбки с помощью HTML и CSS`

Я хотел стилизовать переключатель с помощью CSS, используя состояние: checked ~ (classname).

См. «Переключение улыбки пера с помощью HTML и CSS» от CameronFitzwilliam (@CameronFitzwilliam) на CodePen.

`Жидкостная радиокнопка`

Гибкая концепция эффекта радиокнопки с использованием простого CSS.

См. Радиокнопку Pen Liquid от Zaku (@Zaku) на CodePen.

`Концепция выбора радио только для CSS`

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

См. Концепцию выбора радио для ввода только CSS для пера от web-tiki (@ web-tiki) на CodePen.

`Анимированный флажок и переключатели только для CSS`

HTML-радиокнопки, преобразованные в переключатели с помощью CSS.

См. Флажок и переключатели «Только для CSS с анимацией пером» от koljakutschera (@koljakutschera) на CodePen.

`Расчетная форма`

Форма оформления заказа с использованием стилизованных переключателей.

См. Форму проверки пера от RRoberts (@RRoberts) на CodePen.

`Вход и радиокнопка`

Эффект переключателя контура CSS при нажатии.

См. Перьевой ввод и радио-кнопку от opheliafl (@opheliafl) на CodePen.

`Pure CSS - кнопки выбора радио SVG`

Pen, созданный с использованием только CSS и SVG, JS не требуется.

См. Pen Pure CSS - кнопки выбора радио SVG от nikkipantony (@nikkipantony) на CodePen.

`HTML-кнопки радио`

Открывайте разные окна, щелкая переключатели.

См. Радио-кнопки Pen HTML от imtoobose (@imtoobose) на CodePen.

`Чистый CSS Fancy Checkbox / Radio`

Необычный флажок / радио-кнопки с небольшим переходом, наслаждайтесь!

См. Флажок Pen Pure CSS Fancy / Radio от raubaca (@raubaca) на CodePen.

`Цепь радиокнопки`

Классная концепция электрической схемы с использованием переключателей HTML и CSS.

См. Схему переключателя Pen от lukasoe (@lukasoe) на CodePen.

`Входное радио HTML`

Стилизация радиокнопок с использованием эффекта загрузки как для маркера, так и для границы.

См. HTML-код радио перьевого ввода от andreasstorm (@andreasstorm) на CodePen.

`Radio Button Big Square [Just CSS]`

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

См. Большой квадрат переключателя Pen Radio [Just CSS] от gabrielferreira (@gabrielferreira) на CodePen.

`Флажки и радиогруппы, вдохновленные материалами`

Google Material Design вдохновлен концепциями переключателей и флажков без использования JS.

См. Флажки и радиогруппы, вдохновленные материалами пера от BuddyLReno (@BuddyLReno) на CodePen.

`Радиогруппа с использованием меток`

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

См. Группу Pen Radio Using Labels от samkeddy (@samkeddy) на CodePen.

`Радиокнопки SVG Splat`

Удивительный эффект всплеска, примененный к переключателям с помощью CSS и JS.

См. Радио-кнопки Pen SVG Splat от chrisgannon (@chrisgannon) на CodePen.

`Анимированный переключатель для радиокнопок (только CSS)`

Анимированная сборка переключателя с радио-кнопками.

См. Переключатель с переключателем для радио-кнопок с пером (только CSS) от fredjens (@fredjens) на CodePen.

`Стилизация кнопок радио`

Простой стиль CSS для переключателей HTML.

См. Радио-кнопки стиля пера от Zerk (@Zerk) на CodePen.

`Жидкая радиокнопка с использованием SVG и GSAP`

Потрясающий жидкий эффект радиокнопки с использованием SVG и GSAP. Эта концепция была основана на этом дизайне: https://dribbble.com/shots/1933701-Liquid-Radio-Button

См. Радиокнопку Pen Liquid с использованием SVG и GSAP от ryan_labar (@ryan_labar) на CodePen.

`Скрытые радиосообщения / всплывающие подсказки`

Классный эффект переключателя CSS, который также включает всплывающие подсказки и скрытые сообщения.

См. Скрытые радиосообщения / всплывающие подсказки от joshua_ward (@joshua_ward) на CodePen.

`Обзор пользовательских радиокнопок с помощью jQuery`

переключателей CSS, которые отлично смотрятся в опросах.

См. Обзор пользовательских радиокнопок пера с помощью jQuery от tobiasdev (@tobiasdev) на CodePen.

`Адаптивный тумблер`

Переключатель для использования в ваших формах (с использованием радио-входов в качестве ядра), который реагирует. Создан с использованием CSS, с использованием Flexbox для изменения размера.

См. Тумблер «Отклик пера» от dsenneff (@dsenneff) на CodePen.

`Jelly Radio Button`

Необычный эффект радио-кнопки «желе», стилизованный только с использованием CSS.

См. Радиокнопку Pen Jelly от tomma5o (@ tomma5o) на CodePen.

css, примеры css, настраиваемая радиокнопка, радиокнопка ввода html, радиокнопка html, радиокнопка css, стиль радиокнопки

`Как создавать радиокнопки в HTML [+ примеры]`

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

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

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

`Что такое радио-кнопка HTML?`

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

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

`Радиокнопки и флажки`

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

Признаюсь, это не самая захватывающая тема. Однако их смешение может вызвать у посетителей серьезное недоумение. Поэтому обязательно используйте радиокнопки для меню «Выбрать одно» и сохраните флажки для своих меню «Выбрать все подходящие» или своих одноразовых вопросов (т.д., «Поставьте отметку, если…»).

Теперь, когда мы понимаем назначение переключателей HTML, давайте узнаем, как их создавать.

`Как сделать радиокнопку в HTML`

Чтобы создать переключатель в HTML, используйте элемент с типом radio . Это создает единственную радиокнопку, с которой пользователи могут взаимодействовать:

См. Радиокнопку Pen Single от Кристины Перриконе (@hubspot) на CodePen.

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

См. Группу переключателей пера Кристины Перриконе (@hubspot) на CodePen.

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

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

Как уже упоминалось, переключатели располагаются группами. Используйте обязательный атрибут name , чтобы сгруппировать набор связанных переключателей. В приведенном выше примере все имеют одно и то же значение для name , поэтому они рассматриваются как часть одной группы.Это позволяет пользователям выбирать только один вариант в группе за раз - попробуйте его выше.

Затем атрибут value представляет уникальное значение для переключателя. Пользователи его не видят, но отправлено для представления выбранной опции. Например, если форма выше была отправлена с выбранным элементом «17 лет или моложе», система, обрабатывающая форму, получит значение age = child . Если пользователь не выберет какой-либо переключатель, значение не будет отправлено. Если атрибут value отсутствует для выбранной опции, форма отправит значение по умолчанию на .

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

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

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

`Проверяемый атрибут`

У входов радиокнопок есть один дополнительный атрибут, проверил атрибут . Если включена в тег , кнопка будет выбрана по умолчанию.

См. Форму переключателя пера с выбором по умолчанию от Кристины Перриконе (@hubspot) на CodePen.

`Как разместить радиокнопки HTML в форме`

Что хорошего в переключателях, если пользователи не могут отправлять свои ответы? Вот почему радиокнопки обычно находятся внутри HTML-форм.Элемент HTML

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

Category Css

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт