Css radiobutton оформление: Стилизация Radio Button

Содержание

Bootstrap radiobutton или все тонкости использования кнопок интерфейса

Доброго времени суток, любители веб-разработки и мои дорогие подписчики. Сегодняшняя статья будет посвящена разбору Bootstrap radiobutton.

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

Что за странные кнопки и зачем они нужны?

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

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

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

Варианты создания Radio Buttons

Во фреймворке Bootstrap данный вид кнопок вошел в раздел Input groups. Все элементы данной группы расширяют возможности форм и обязательно создаются внутри непарного тега <input>.

Radio Buttons можно реализовать несколькими способами:

В виде кнопок, используя класс .btn- group;
В привычном виде при помощи класса .form- check;
Внутри класса .input-group.

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

Стоит также сразу сказать, что при выборе определенного варианта у отмеченного radiobutton-а появляется атрибут «checked», который определяет текущее состояние объекта. Он функционирует так же, как и атрибут «selected» в списках, известных под названием Select List.

Radiobuttons в виде кнопок

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

Запомните! Состояние «checked» будет обновляться только при выполнении сложного события «click». Если же необходимо выбрать другой метод обновления, то к классам тега <label> стоит дописать .active.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Радиобаттоны в виде обычных кнопок</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
 
<div data-toggle="buttons">
  <label>
    <input type="radio" name="radioOption" autocomplete="off" checked>Вариант 1
  </label>
  <label>
    <input type="radio" name="radioOption" autocomplete="off"> Вариант 2
  </label>
  <label>
    <input type="radio" name="radioOption" autocomplete="off"> Вариант 3
  </label>
</div>
</div>
 
</body>
</html>

<!DOCTYPE html> <html lang=»en»> <head> <title>Радиобаттоны в виде обычных кнопок</title> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script> </head> <body> <div> <div data-toggle=»buttons»> <label> <input type=»radio» name=»radioOption» autocomplete=»off» checked>Вариант 1 </label> <label> <input type=»radio» name=»radioOption» autocomplete=»off»> Вариант 2 </label> <label> <input type=»radio» name=»radioOption» autocomplete=»off»> Вариант 3 </label> </div> </div> </body> </html>

Использование привычного класса form-check

В этом приложении я создал четыре кнопки стандартного вида и изменил цвет текста при помощи css. Обратите внимание на четвертый вариант ответа. Он недоступен для выбора. Такой прием стал возможным из-за указания ключевого слова и одноименного класса «disabled».

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Стандартный вид</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  h3 {color: #191970;}
  label { color: #6A5ACD;}
  </style>
</head>
<body>
 
<div>
<h3>Чем вы планируете заняться сегодня вечером?</h3>
<div>
  <label>
    <input type="radio" name="radioOptions" value="option1" checked>
    Уже запланировал(а) встречу с друзьями. Будем веселиться!
  </label>
</div>
<div>
  <label>
    <input type="radio" name="radioOptions" value="option2">
    Займусь самообразованием. 
  </label>
</div>
<div>
  <label>
    <input type="radio" name="radioOptions" value="option3">
    Устрою себе отдых. Скорее всего посмотрю фильм или прочту книгу.
  </label>
</div>
<div>
  <label>
    <input type="radio" name="radioOptions" value="option4" disabled>
   Вечер прошел и я уже лег спать.
  </label>
</div>
 
</div>
 
</body>
</html>

<!DOCTYPE html> <html lang=»en»> <head> <title>Стандартный вид</title> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script> <style> h3 {color: #191970;} label { color: #6A5ACD;} </style> </head> <body> <div> <h3>Чем вы планируете заняться сегодня вечером?</h3> <div> <label> <input type=»radio» name=»radioOptions» value=»option1″ checked> Уже запланировал(а) встречу с друзьями. Будем веселиться! </label> </div> <div> <label> <input type=»radio» name=»radioOptions» value=»option2″> Займусь самообразованием. </label> </div> <div> <label> <input type=»radio» name=»radioOptions» value=»option3″> Устрою себе отдых. Скорее всего посмотрю фильм или прочту книгу. </label> </div> <div> <label> <input type=»radio» name=»radioOptions» value=»option4″ disabled> Вечер прошел и я уже лег спать. </label> </div> </div> </body> </html>

Если же вам необходимо варианты ответа разместить в одну строку, то этого можно добиться с помощью класса .form-check-inline в элементе <label> и удалением блоков

<div> … </div>

или же простым размещением всех input-ов c label-ами в одном таком div-е.

Работа с группой инпутов

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

В примере я реализовал подобный прием с радиокнопкой и текстовым полем.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Стандартный вид</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
</head>
<body>
 
<div>
<h3>Вы согласны подписаться на мой блог?</h3>
<div>
      <span>
        <input type="radio">
      </span>
      <input type="text" value="Да, я согласен(на).">
    </div>
</div>
 
</body>
</html>

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

С уважением, Роман Чуешов

Прочитано: 444 раз

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

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

Последнее обновление: 08.04.2016

Флажок

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Чекбокс в HTML5</title>
	</head>
	<body>
		<h3>Изучаемые технологии</h3>
		<form>
			<p>
				<input type="checkbox" checked name="html5"/>HTML5
			</p>
			<p>
				<input type="checkbox" name="dotnet"/>.NET
			</p>
			<p>
				<input type="checkbox" name="java"/>Java
			</p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
	</body>
</html>

Атрибут checked позволяет установить флажок в отмеченное состояние.

Переключатели

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Радиокнопки в HTML5</title>
	</head>
	<body>
		<form>
			<h3>Укажите пол</h3>
			<p>
				<input type="radio" value="man" checked name="gender"/>мужской
			</p>
			<p>
				<input type="radio" value="woman" name="gender"/>женский
			</p>
			<h3>Выберите технологию</h3>
			<p>
				<input type="radio" value="html5" checked name="tech"/>HTML5
			</p>
			<p>
				<input type="radio" value="net" name="tech"/>.NET
			</p>
			<p>
				<input type="radio" value="java" name="tech"/>Java
			</p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
	</body>
</html>

Для создания радиокнопки надо указать атрибут type="radio". И теперь другой атрибут name указывает не на имя элемента, а на имя группы, к которой принадлежит элемент-радиокнопка. В данном случае у нас две группы радиокнопок: gender и tech. Из каждой группы мы можем выбрать только один переключатель. Опять же чтобы отметить радиокнопку, у нее устанавливается атрибут checked:

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

15+ плагинов jQuery для радио кнопок и стилей флажков

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

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

Скройте чекбоксы

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

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

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

Радиокнопки

Во-первых, вот наша разметка:

<section>
    <div>
      <input type="radio" name="group1">
      <label for="radio-1"><span>Coffee</span></label>
    </div>
    <div>
      <input type="radio" name="group1">
      <label for="radio-2"><span>Tea</span></label>
    </div>
    <div>
      <input type="radio" name="group1">
      <label for="radio-3"><span>Cappuccino</span></label>
    </div>
</section>

Теперь у нас есть раздел с тремя радиокнопками. Мы рассмотрим чекбоксы чуть позже в этом посте, по тому же принципу. Каждый input обернут в div с классом container. Кроме того, каждый input имеет label со span в нём.

Важно!

Поскольку мы скрыли входы радио и чекбоксов, единственный способ для нас получить к ним доступ — использовать label тег. Для правильной работы тег label должен содержать атрибут «for» с идентификатором соответствующего ввода. Если вход имеет идентификатор «radio-1», то атрибут «for» также должен быть «radio-1». Вы можете удивиться, почему текст внутри каждого label обернут в span:

<div>
      <input type="radio" name="group1">
      <label for="radio-1"><span>Coffee</span></label>
</div>

Так как мы собираемся стилить кнопки с псевдоэлементами «::before и «::after, нам понадобиться родительский элемент, на основе которого они могут быть расположены. В этом случае это будет наш label:

.container label {
  position: relative;
}

Вот стили, которые подходят как для чекбоксов, так и для радиокнопок:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Свойства top и bottom установлены на ноль и объединены с «margin: auto;» это позволяет нашим элементам иметь центральное горизонтальное положение.

Вот как выглядят остальные стили:

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

Самая важная часть — последний набор правил, в котором в основном и заключается вся фишка. Псевдокласс «: checked» позволяет нам вносить изменения в элементы при проверке ввода. С помощью селектора ‘+’ мы можем выбрать следующий родственный элемент и нацелить наш «span.radio», где мы применяем новые правила к псевдоэлементу «:: after». В этом случае мы меняем его горизонтальное положение и цвет. Чтобы сделать переключение плавным, мы назначаем переход 0,25 секунды для свойства left и background-color. Теперь, когда мы нажимаем переключатель, переключатель движется плавно, а не быстро.

Чекбоксы

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

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

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

Отдельно

Если вы хотите использовать иконку FontAwesome в своем псевдоэлементе, вы должны включить её код в свойство content и указать свойство font-family как «FontAwesome». Например:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Коду «f00c» предшествует обратный слеш, который нужен для отображения символа Юникода.

Юникод можно найти на странице выбранной вами иконки:

Финал

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

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

***

Надеюсь, в этом посте вы нашли полезную и понятную для себя информацию. Буду рада вашим комментариям 🙂

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' }}
/>

HTML и CSS с примерами кода

Тег <input> (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.

Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Основной атрибут <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.

Формы

Синтаксис

Закрывающий тег не требуется.

Атрибуты

accept: Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
alt: Альтернативный текст для кнопки с изображением.
autocomplete: Включает или отключает автозаполнение.
autofocus: Устанавливает фокус в поле формы.
checked: Предварительно активированный переключатель или флажок.
dirname: Параметр, который передаёт на сервер направление текста.
disabled: Блокирует доступ и изменение элемента.
form: Связывает поле с формой по её идентификатору.
formaction: Определяет адрес обработчика формы.
formenctype: Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod: Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate: Отменяет встроенную проверку данных на корректность.
formtarget: Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list: Указывает на список вариантов, которые можно выбирать при вводе текста.
max: Верхнее значение для ввода числа или даты.
maxlength: Максимальное количество символов разрешённых в тексте.
min: Нижнее значение для ввода числа или даты.
minlength: Минимальное количество символов разрешённых в тексте.
multiple: Позволяет загрузить несколько файлов одновременно.
name: Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern: Устанавливает шаблон ввода.
placeholder: Выводит подсказывающий текст.
readonly: Устанавливает, что поле не может изменяться пользователем.
required: Обязательное для заполнения поле.
size: Ширина текстового поля.
src: Адрес графического файла для поля с изображением.
step: Шаг приращения для числовых полей.
type: Сообщает браузеру, к какому типу относится элемент формы.
value: Значение элемента.

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

accept

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

Применяется к полю для отправки файла (<input type="file">).

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

Can I Use input-file-accept? Data on support for the input-file-accept feature across the major browsers from caniuse.com.

Синтаксис

<input type="file" accept="<MIME-тип>" />

Значения

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.

Список MIME-типов файлов.

Значение по умолчанию

Нет.

alt

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

Синтаксис

<input type="image" alt="<текст>" />

Значения

Любая подходящая текстовая строка.

Значение по умолчанию

Нет.

autocomplete

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

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

Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.

Синтаксис

<input type="text" autocomplete="on | off" />
<input type="password" autocomplete="on | off" />
<input type="email" autocomplete="on | off" />
<input type="search" autocomplete="on | off" />
<input type="url" autocomplete="on | off" />
<input type="tel" autocomplete="on | off" />

Значения

on: Включает автозаполнение текста.
off: Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Значение по умолчанию

Зависит от настроек браузера.

autofocus

Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут autofocus не установлен.

checked

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

Синтаксис

<input type="radio" checked />
<input type="checkbox" checked />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

dirname

При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname, а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr, а для текста справа налево (иврита, к примеру) значение будет rtl.

Синтаксис

<input type="text" dirname="<строка>" />
<input type="search" dirname="<строка>" />

Значения

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

Значение по умолчанию

Нет.

disabled

Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

form

Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form>, например, при создании её программно или по соображениям дизайна.

Синтаксис

<input type="<тип>" form="<идентификатор>" />
<form>...</form>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

Значение по умолчанию

Нет.

formaction

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form>.

Синтаксис

<input type="submit" formaction="<адрес>" />

Значения

Нет.

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>, при совместном использовании formenctype и enctype последний игнорируется.

Синтаксис

<input
  type="submit"
  formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
/>

Значения

application/x-www-form-urlencoded: Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
multipart/form-data: Данные не кодируются. Это значение применяется при отправке файлов.
text/plain: Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Значение по умолчанию

application/x-www-form-urlencoded

formmethod

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

<input type="submit" formmethod="get | post" />

Значения

Различают два метода — GET и POST, которые задаются ключевыми словами get и post.

get: Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб.
post: Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

Значение по умолчанию

get

formnovalidate

Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у элемента <input>.

Синтаксис

<input type="submit" formnovalidate />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

formtarget

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

Синтаксис

<input
  type="submit"
  formtarget="<имя фрейма> | _blank | _self | _parent | _top"
/>

Значения

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

_blank: Загружает страницу в новую вкладку браузера.
_self: Загружает страницу в текущую вкладку.
_parent: Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top: Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.

Значение по умолчанию

_self

list

Указывает на список вариантов, созданный с помощью элемента <datalist>, которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.

Синтаксис

<input list="<идентификатор>" />
<datalist>
  <option value="Текст1"></option>
  <option value="Текст2"></option>
</datalist>

Значения

Имя идентификатора элемента <datalist>.

Значение по умолчанию

Нет.

max

Устанавливает верхнее значение для ввода числа или даты в поле формы.

Синтаксис

<input type="number" max="<число>" />
<input type="range" max="<число>" />
<input type="date" max="<дата>" />

Значения

Целое положительное или отрицательное число (для type="number", type="range").

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".

Значение по умолчанию

Нет.

maxlength

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

Синтаксис

<input type="text" maxlength="<число>" />
<input type="password" maxlength="<число>" />

Значения

Любое целое положительное число.

Значение по умолчанию

Ввод символов не ограничен.

min

Устанавливает нижнее значение для ввода числа или даты в поле формы.

Синтаксис

<input type="number" min="<число>" />
<input type="range" min="<число>" />
<input type="date" min="<дата>" />

Значения

Целое положительное или отрицательное число (для type="number", type="range").

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".

Значение по умолчанию

Нет.

minlength

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

Синтаксис

<input type="text" minlength="<число>" />
<input type="password" minlength="<число>" />

Значения

Любое целое положительное число.

Значение по умолчанию

Нет.

multiple

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

Синтаксис

<input type="file" multiple />
<input type="email" multiple />

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут multiple выключен.

name

Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.

Синтаксис

<input name="<имя>" />

Значения

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

Значение по умолчанию

Нет.

pattern

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

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

Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.[ 0-9]+$Любое число.[0-9]{6}Почтовый индекс.\d+(,\d{2})?Число в формате 1,34 (разделитель запятая).\d+(\.\d{2})?Число в формате 2.10 (разделитель точка).\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}IP-адрес

placeholder

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

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

Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.

Синтаксис

<input placeholder="<текст>" />

Значения

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

Значение по умолчанию

Нет.

readonly

Когда к элементу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.

Синтаксис

<input type="text" readonly />
<input type="password" readonly />

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

required

Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут required выключен.

size

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

Синтаксис

<input type="text" size="<число>" />
<input type="password" size="<число>" />

Значения

Любое целое положительное число.

Значение по умолчанию

20

src

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

Синтаксис

<input type="image" src="<адрес>" />

Значения

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

Значение по умолчанию

Нет.

step

Устанавливает шаг изменения числа для ползунков и полей ввода чисел.

Синтаксис

<input type="number" step="<число>" />
<input type="range" step="<число>" />

Значения

Любое целое или дробное число.

Значение по умолчанию

1

type

Сообщает браузеру, к какому типу относится элемент формы.

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

email, tel, url:

Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.

color:

Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.

range:

Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.

number:

Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.

search:

Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.

date, time, datetime:

Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.

Синтаксис

<input
  type="button|checkbox|file|hidden|image|password|radio|reset|submit|text"
/>

Значения

Значения type:

button: Кнопка.
checkbox: Флажки. Позволяют выбрать более одного варианта из предложенных.
file: Поле для ввода имени файла, который пересылается на сервер.
hidden: Скрытое поле. Оно никак не отображается на веб-странице.
image: Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password: Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio: Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset: Кнопка для возвращения данных формы в первоначальное значение.
submit: Кнопка для отправки данных формы на сервер.
text: Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения:

color: Виджет для выбора цвета.
date: Поле для выбора календарной даты.
datetime: Указание даты и времени.
datetime-local: Указание местной даты и времени.
email: Для адресов электронной почты.
number: Ввод чисел.
range: Ползунок для выбора чисел в указанном диапазоне.
search: Поле для поиска.
tel: Для телефонных номеров.
time: Для времени.
url: Для веб-адресов.
month: Выбор месяца.
week: Выбор недели.

Значение по умолчанию

text

value

Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <input>, а значение — атрибутом value.

В зависимости от типа элемента атрибут value выступает в следующей роли:

для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
для текстовых полей (input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибуте value;
для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
для файлового поля (input type="file") не оказывает влияние.

Синтаксис

<input value="<текст>" />

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Значения ARIA role

<input type=button> — role=button
<input type=checkbox> — role=checkbox
<input type=email> — role=textbox
<input type=image> — role=button
<input type=number> — role=spinbutton
<input type=radio> — role=radio
<input type=range> — role=slider
<input type=reset> — role=button
<input type=search> — role=searchbox
<input type=submit> — role=button
<input type=tel> — role=textbox
<input type=text> — role=textbox
<input type=text, search, tel, url, или email с атрибутом list> — role=combobox
<input type=url> — role=textbox

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>INPUT</title>
  </head>

  <body>
    <form name="test" method="post" action="input1.php">
      <p>
        <b>Ваше имя:</b><br />
        <input type="text" size="40" />
      </p>
      <p>
        <b>Каким браузером в основном пользуетесь:</b><br />
        <input type="radio" name="browser" value="ie" />
        Internet Explorer<br />
        <input type="radio" name="browser" value="opera" />
        Opera<br />
        <input
          type="radio"
          name="browser"
          value="firefox"
        />
        Firefox<br />
      </p>
      <p>
        Комментарий<br />
        <textarea
          name="comment"
          cols="40"
          rows="3"
        ></textarea>
      </p>
      <p>
        <input type="submit" value="Отправить" />
        <input type="reset" value="Очистить" />
      </p>
    </form>
  </body>
</html>

Ссылки

Создание HTML-форм и присоединение поведений JavaScript к объектам форм

а. Чтобы выбрать форму, щелкните контур формы в окне документа.

б. В поле «Имя формы» введите уникальное имя, по которому можно будет идентифицировать форму.

Присвоив форме имя, вы сможете ссылаться на нее или контролировать ее, используя язык сценариев, например JavaScript или VBScript. Если не присвоить форме имя, Dreamweaver автоматически генерирует имя, используя синтаксис formn, увеличивая значение n для каждой добавляемой на страницу формы.

в. В поле «Действие» укажите страницу или сценарий, в котором будут обрабатываться данные формы, указав путь или щелкнув значок папки, чтобы перейти на нужную страницу или в нужный сценарий. Пример: processorder.php.

г. Во всплывающем меню «Метод» укажите метод передачи данных формы на сервер.

Задайте любой из следующих параметров.

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

GET — добавляет значение в URL-адрес, запрашивающий страницу.

POST — вставляет данные формы в HTTP-запрос.

Не используйте метод GET для отправки длинных форм. Длина URL-адреса ограничена 8192 символами. Если объем отправленных данных слишком велик, данные будут обрезаны, что приведет к неожиданным результатам или сбою обработки.

Динамические страницы, созданные параметрами, которые передаются методом GET, можно пометить закладками, потому что все значения, необходимые для повторного создания страницы, содержатся в URL-адресе, отображаемом в поле «Адрес» браузера. А динамические страницы, созданные параметрами, которые передаются методом POST, пометить закладкой невозможно.

При сборе имен пользователей и паролей, номеров кредитных карт или других конфиденциальных сведений метод POST является более безопасным, чем метод GET. Однако данные, передаваемые методом POST, не шифруются и могут быть легко перехвачены хакерами. Для защиты данных используйте безопасное подключение к безопасному серверу.

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

Параметр по умолчанию application/x-www-form-urlencode обычно используется вместе с методом POST. При создании поля для загрузки файла укажите тип MIME multipart/form-data.

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

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

_blank — открывает целевой документ в новом неименованном окне.

_parent — открывает целевой документ в родительском окне окна, в котором отображается текущий документ.

_self — открывает целевой документ в том же окне, где была отправлена форма.

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

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

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

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

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

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

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

Радиокнопка HTML #

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

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

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

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

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

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

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

   
  
  
   
  
  Radio 1  
    
  
  
   
  
  Radio 2  
 < / label>

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

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

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

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

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

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

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

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

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

Сброс #

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

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

 : корень {
 - цвет: rebeccapurple; 
}

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

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

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

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

  .radio {
 размер шрифта: 2,25 rem; 
 цвет: var (- цвет); 
}

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

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

 . Радио { дисплей: сетка; 
 столбцы-шаблона-сетки: автоматическое минимальное содержание; 
 сетка-зазор: 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 , чтобы сохранить его относительно размера шрифта , примененного к метке. Мы также используем 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. Улучшение ввода по сравнению с выравниванием этикеток #`

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

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

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

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

  .radio__label {
 line-height: 1; 
}

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

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

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

  .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); 
}  
 А вот гифка результата с использованием анимированного элемента : before :
 Шаг 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  требует полифилла, поэтому следующие стили следует рассматривать как усовершенствование, а не на них как на единственный способ обеспечить визуальную индикацию фокуса.
 Первая корректировка, которую мы сделаем, это добавим переход   и уменьшим непрозрачность   для  radio__label :
 .radio__label {
 transition: 180 мс для всех выходов; 
 непрозрачность: 0,8; 
}  
  Убедитесь, что уменьшенная непрозрачность по-прежнему соответствует контрасту, соответствующему вашей цветовой палитре. 
 Затем мы проверим фокус, добавив правило для : focus-within  на этикетке ( .radio ). Это означает, что когда собственный ввод, который является потомком и, следовательно, находится "внутри" метки, получает фокус, мы можем стилизовать  для любого элемента  внутри метки, пока фокус активен.
 Итак, мы немного увеличим визуальный размер текста метки, используя масштаб  () , и снова увеличим непрозрачность.
  .radio { &: focus-within {
 .radio__label {
 преобразование: масштаб (1.05); 
 непрозрачность: 1; 
} 
} 
} 
  
 Использование шкалы  ()  предотвращает влияние изменения размера на поток элементов и возникновение дрожания. Переход делает это красиво и плавно, как показано на этом гифке:
.
 Демо № 
 Вот решение в целом: первая радиостанция демонстрирует состояние : проверено  с использованием радиального градиента  , а вторая демонстрирует использование : до :
 Стефани Эклс (@ 5t3ph)
 Ознакомьтесь с настраиваемым стилем флажка, чтобы узнать, как расширить стили до состояния : отключено , и посмотрите, как работать с SVG как с индикатором : проверено .
 Настройка внешнего вида радиокнопки с помощью CSS 
 Если вам когда-либо приходилось разрешать пользователю выбирать один из множества вариантов на веб-странице, вы знаете, что тип радиовхода позволяет это сделать.
 Но что, если вы хотите настроить внешний вид и вместо того, чтобы показывать обычные переключатели, вам нужны такие кнопки, которые можно нажимать?
 Что ж, благодаря очень полезному ответу StackOverflow я смог понять, как создать этот стиль переключателей.
 Прежде всего, вы начинаете с того, что скрываете сами круглые переключатели - мы просто стилизуем ярлыки. Мы можем выбрать их, используя  input [type = "radio"] . Первоначально я скрывал это, установив  display: none , но, как отмечает Патрик Кедровски в комментариях, это будет означать, что они не фокусируются и не могут перемещаться с помощью клавиатуры. Поэтому вместо этого мы делаем его невидимым со следующими настройками:
  .radio-toolbar input [type = "radio"] {
  непрозрачность: 0;
  положение: фиксированное;
  ширина: 0;
}
  
 Затем мы устанавливаем метки, чтобы они выглядели так, как мы хотим, по умолчанию, когда они не выбраны:
 .ярлык радио-панели инструментов {
    дисплей: встроенный блок;
    цвет фона: #ddd;
    отступ: 10 пикселей 20 пикселей;
    семейство шрифтов: без засечек, Arial;
    размер шрифта: 16 пикселей;
    граница: 2px solid # 444;
    радиус границы: 4 пикселя;
}
  
 Теперь нам нужно стилизовать выбранный объект по-другому. Именно здесь происходит настоящая магия CSS - нам нужно использовать селектор : checked  и селектор «смежный брат» (знак +). Таким образом, это правило CSS применяется к любой метке, которая следует сразу за отмеченным переключателем.
  .radio-toolbar input [type = "radio"]: отмечено + label {
    цвет фона: #bfb;
    цвет границы: # 4c4;
}
  
 По причинам доступности мы также хотели бы изменить внешний вид, когда кнопка находится в фокусе. Мы можем использовать ту же технику выбора. В этом примере я просто делаю границу пунктирной.
  .radio-toolbar input [type = "radio"]: focus + label {
    граница: 2px пунктирная # 444;
}
  
 Вот как это выглядит сфокусированным. Это позволяет вам использовать стрелки влево и вправо для изменения выбора:
 Наконец, мне нужен эффект наведения, чтобы при наведении курсора мыши на другие параметры они меняли внешний вид.Этого можно добиться с помощью селектора : hover .
  .radio-toolbar label: hover {
  цвет фона: #dfd;
}
  
 Вот полный пример:
 Стилизация радиокнопок с помощью 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 разработали этот набор кнопок.Изменение затенения показывает выбранный параметр. Простой и стильный дизайн.
 Переключатель шлепка 
 Ярив Фруенд. Переключатель slap - еще один вариант переключателя 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.
 Радиокнопка большая квадратная 
 Стилизованная радиокнопка, в которой в качестве кнопок используются текстовые поля.Выбранный вариант отображается изменением цвета и маленьким символом. Сделано Габриэлем Феррейрой.
 Radio Color Picker 
 Разработано The Bearded Wonder.
 Эти радиокнопки не предлагают конкретный выбор текста, а только цветовой блок. Поэтому они отличаются от тех, что обсуждались до сих пор. Этот дизайн очень полезен при выборе цветовых вариантов. Код для этих кнопок был написан на CSS и HTML и не зависел от JS. Они хорошо работают на любом устройстве и легко воспроизводятся.Их использование экономит много времени и сил.
 Перейдите по ссылке, чтобы узнать больше о кнопках, коде и разработчике.
 Превосходная кнопка переключения 
 Эти кнопки, сделанные Андреем, представляют собой тумблеры. Он имеет анимированные изменения выбора. Изменение цвета и значок также указывают на выбор.
 Вариант на чистом CSS 
 Дизайн магнитолы, сразу привлекающий внимание. В нем используются большие красочные коробки.
 Тонкие изменения в оттенках показывают выбранный выбор.Дизайн позволяет активировать предупреждения, которые также подтверждают выбор.
 Арон написал параметры на чистом CSS.
 Bulgy Радио 
 Лиам использовал JS в своем коде для Bulgy Radios. Анимация смены выбора яркая и продуманная.
 закусок? Плоские входы радиокнопок… 
 Эти стилизованные радиокнопки просты и понятны. Им можно управлять с помощью мыши или клавиатуры.
 Jelly Radio Button 
 Томассо Полетти сделал эту простую и веселую пуговицу.Он использовал только Vanilla CSS для написания кода.
 Анимация пульсации для типа ввода Радио и флажка 
 Радиокнопка и флажок с анимацией ряби, сделанный Уайлдером Тайпе.
 Плоское радио - Да / Нет 
 Сделано Мэтью Блодом.
 Кнопка «Да / Нет», аналогичная «Стилизованным радио-кнопкам» Нейта Уайли. Как следует из названия, эти кнопки плоские. Цвета кнопок $ красный, $ синий и $ зеленый можно регулировать.
 Полностью CSS: настраиваемые флажки, переключатели и поля выбора 
 Пользовательские переключатели, поля выбора и флажки от Kenan Yusuf.
 Recreation: Переключатель карточных тем 
 Эти радиокнопки, разработанные Дином Хидри, имеют тему кредитных карт. Каждая кнопка позволяет выбрать свой цвет. Приятная анимация сопровождает изменение выбора.
 Переключить радио-вход с помощью метки 
 Переключатели переключателей от Андрея Верещака используют 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 для вождения, ходьбы или езды на велосипеде. Таким образом, они хорошо работают в сочетании с настраиваемой картой или трекером местоположения.
 При наведении курсора на значки всплывающая подсказка придает дополнительную ясность значению изображений. Можно заменить данные изображения собственными пользователями.Выбор выделяется сферой или другим цветом.
 Флажок Pure CSS Fancy / Радио 
 Эти кнопки создал Рауль Баррера. Необычные и гибкие переключатели и флажки. Коды 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 новинок.
 Кнопки радио начальной загрузки
 Флажки CSS
 Тумблеры CSS
  
 О коде 
 Пользовательские кнопки радио 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: -
 Автор 
 Джон Кантнер
  11 августа 2020 
 О коде 
 Радио под капотом 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Скотт Кеннеди
  8 августа 2020 
 О коде 
 Стиль радиокнопки 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Ашар Сетиаван
  18 июня 2020 
 О коде 
 Фильтр состояния 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: попутный ветер.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 
 О коде 
 Группа радиокнопок 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Неуморфный переключатель CSS 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Bounce Radio 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Милан Раринг
  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 г. 
 О коде 
 Pure CSS Radio Button Точка-слайдер 
 Ползунок с перемещением по диапазону, скользящим точечным индикатором, метками, стилем с условием действительности и без 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
 отзывчивый: да
 Зависимости: -
 О коде 
 Радиокнопки выравнивания 
 Уловки CSS: используйте  flex-grow  для перехода.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: -
 Автор 
 Андреас Сторм
  25 мая 2018 г. 
 О коде 
 Радиокнопки Material Design 
 Радиокнопки Pure CSS Material Design.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: bootstrap.css
 Автор 
 Тамино Мартиниус
  18 мая 2018 г. 
 О коде 
 Колебание радиокнопок 
 Фрагмент пользовательского интерфейса для переключателей в HTML, CSS и JS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Адаптивный тумблер 
 Тумблер для использования в ваших формах (с использованием радио-входов в качестве ядра), который реагирует.Стилизован с помощью CSS, с использованием  flexbox  для изменения размера.
 Автор 
 Кэмерон Фицуильям
  15 января 2018 
 О коде 
 Переключатель улыбки (HTML + CSS) 
 Радиокнопка с CSS с использованием состояния : checked ~ (classname) .
 Автор 
 Никки Пантони
  6 января 2018 г. 
 О коде 
 Кнопки выбора радиоприемника на чистом CSS-SVG 
 Пример построен с использованием только CSS и SVG, JS не требуется.В духе Google Material Design.
 Автор 
 Ярив Фруенд
  6 января 2018 г. 
 О коде 
 Переключатель шлепка 
 Переключатель шлепка CSS.
 Автор 
 Андреас Сторм
  21 ноября 2017 г. 
 О коде 
 Входное радио 
 Простой стиль ввода радио.
 О коде 
 ☑️ Переключатели трансформации, будет меняться ☑️ 
 Версия Flexbox Toggles только для преобразования для сравнения производительности и кода. Это идет немного дальше с  will-change  для  масляно-гладкой анимации  без перерисовки.
 Совместимые браузеры: 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 г.
 Демонстрационное изображение: Радио выбирает Радио выбирает 
 Радио выбирает: флексбокс и прикол.
 Сделано Адамом Кларком 
 17 августа 2016 г.
 Демонстрационное изображение: Форма оформления заказа Форма оплаты 
 Форма оформления заказа с использованием стилизованных переключателей. 
 Сделано Rosa 
 16 июля 2016 г.
 Демонстрационное изображение: Радиокнопки SVG Splat Радиокнопки SVG Splat 
 Переключатели для HTML, CSS и SVG splat. 
 Сделано Крисом Гэнноном 
 18 июня 2016 г.
 Демонстрационное изображение: Radio Buttons Radio Buttons 
 Открывайте разные окна, щелкая переключатели.
 Сделано Saumitra Bose 
 1 июня 2016 г.
 Демонстрационное изображение: Концепция выбора радио только для CSS Концепция выбора радио только для CSS 
 Тестирование концепции выбора входного радио с помощью анимированного слайда, чтобы узнать, какой из них выбран. 
 Сделано в web-tiki 
 9 мая 2016 г.
 Демонстрационное изображение: Вход и радиокнопка Вход и радиокнопка 
 Чистый ввод CSS и переключатель. 
 Автор Офелия Фурнье-Лафламм 
 27 апреля 2016 г.
 Демонстрационное изображение: очень простые радиокнопки Очень простые радиокнопки 
 HTML и CSS просто очень простые переключатели.
 Сделано Памелой Дайн 
 17 апреля 2016 г.
 Демонстрационное изображение: флажок Pure CSS Fancy / Radio Pure CSS Fancy Checkbox / Radio 
 Необычный флажок / радио-кнопки с небольшим переходом, наслаждайтесь! 
 Сделано Раулем Баррерой 
 11 апреля 2016 г.
 Демо-изображение: Google Dots Radio Buttons Google Dots Radio Buttons 
 4 различных способа простой настройки переключателей. 
 Сделано Виктором Фрейре 
 5 марта 2016 г.
 Демонстрационное изображение: Анимированный переключатель для радиокнопок Анимированный переключатель для радиокнопок 
 CSS только анимированная сборка переключателя с радио-кнопками.
 Сделано Фредриком Йенсеном 
 23 января 2016 г.
 Демо-изображение: Материал Radio Button Материал Radio Button 
 Радиокнопка «Материал» с 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 г.
 Стилизация флажков и переключателей с использованием CSS 
 Стилизация флажков и переключателей стала возможной с введением псевдокласса: checked в CSS3.
 На этой странице описаны два метода: метод на основе изображений, показанный в демонстрации ниже, и метод чистого CSS.
 Скачать примеры 
 Архивы ниже содержат два набора файлов примеров, демонстрирующих методы стилизации на основе изображений и чистого CSS, описанные на этой странице.
 Стиль на основе изображений 
 Стиль на основе изображений обеспечивает максимальную гибкость внешнего вида.
 В приведенном выше примере мы объединяем изображения для трех состояний (снят, установлен флажок и выбран переключатель) в одно изображение для более быстрой загрузки:
 Для каждого флажка или переключателя используется HTML следующей формы:
1
2
3
4
   
  
   Значение 

  
 Элементы ввода и метки показаны здесь в отдельных строках для повышения удобочитаемости; их обычно следует размещать на одной линии, без промежутков между ними, для более точной укладки.
 Мы скрываем флажки и переключатели в таблице стилей:
1
2
3
4
5
6
7
   ввод [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ширина: 28 пикселей;
  маржа: 0;
  отступ: 0;
  непрозрачность: 0;
}
  
 Селекторы в строках 1 и 2 используют псевдокласс отрицания, чтобы скрыть правило от старых браузеров.Строки 3–5 устанавливают ширину, поля и отступы, чтобы можно было точно позиционировать альтернативную графику.
 Строка 6 устанавливает непрозрачность, чтобы сделать стандартный пользовательский интерфейс невидимым.
 Затем мы размещаем метку и отображаем непроверенное изображение:
1
2
3
4
5
6
7
8
   ввод [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  дисплей: встроенный блок;
  маржа слева: -28 пикселей;
  отступ слева: 28 пикселей;
  фон: url ('проверяет.png ') без повтора 0 0;
  высота строки: 24 пикселя;
}
  
 Строка 3 устанавливает метку для отображения в виде встроенного блочного элемента, позволяя строке 7 установить ее высоту равной высоте альтернативной графики и центрировать текст по вертикали.
 В строке 4 используется отрицательное поле, чтобы закрыть пространство, в котором будет отображаться стандартный пользовательский интерфейс, а в строке 5 затем используется заполнение, чтобы восстановить текст метки в правильном положении.
 Значение 28 пикселей, используемое здесь и в предыдущем правиле, равно ширине изображения плюс некоторый дополнительный отступ, чтобы текст метки не располагался слишком близко к изображению.Строка 6 отображает непроверенное изображение в пространстве перед текстом метки.
 Наконец, мы отображаем выбранные изображения, когда установлены флажки и переключатели:
1
2
3
4
5
6
7
   input [type = checkbox]: not (old): checked + label {
  background-position: 0 -24px;
}

input [type = radio]: not (old): checked + label {
  фоновая позиция: 0 -48 пикселей;
}
  
 Поскольку мы объединили изображения для различных состояний в одно изображение, эти правила изменяют положение фона, чтобы показать соответствующее изображение.
 Стиль на чистом CSS 
 Приведенная ниже демонстрация оформлена исключительно с использованием CSS.
 В отличие от метода на основе изображений, метод чистого CSS масштабируется с размером текста.
 HTML-код, используемый для каждого флажка или переключателя, аналогичен таковому в методе на основе изображений:
1
2
3
4
   
  
       Значение 

  
 Элементы диапазона внутри метки используются для создания альтернативной графики.В то время как радиокнопки требуют обоих диапазонов, для флажков требуется только один.
 Мы скрываем флажки и переключатели в таблице стилей:
1
2
3
4
5
6
7
8
   ввод [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ширина: 2em;
  маржа: 0;
  отступ: 0;
  размер шрифта: 1em;
  непрозрачность: 0;
}
  
 Этот метод такой же, как и в методе на основе изображений, но поскольку ширина устанавливается относительно размера шрифта в строке 3, мы должны восстановить размер шрифта в строке 6, поскольку браузеры используют меньший размер шрифта для флажков и переключателей с помощью дефолт.
 Затем мы размещаем метку:
1
2
3
4
5
6
   ввод [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  дисплей: встроенный блок;
  маржа слева: -2em;
  высота строки: 1.5em;
}
  
 Опять же, метод такой же, как и в методе на основе изображений, но с использованием относительных единиц.Заполнение не требуется, поскольку масштабируемая графика, в отличие от фонового изображения, будет подталкивать текст метки.
 Затем мы стилизуем первый диапазон, чтобы создать непроверенную графику:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
   ввод [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 обеспечивает размещение графики внизу этикетки, а не на базовой линии текста.
 В этом примере градиент фона меняется на противоположный для выбранных флажков и переключателей:
1
2
3
4
5
6
7
8
   вход [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));
}
  
 Затем мы отображаем галочку внутри выбранных флажков:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
   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 делается стиль текста.
 Наконец, мы отображаем «маркер» внутри выбранных переключателей, применяя те же методы, что и для непроверенной графики, ко второму элементу диапазона:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
   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));
}
  
 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 Radio Selector Buttons от 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 и много творчества. Отлично работает при выборе категории.
 См. Переключатель «Перо» - большой квадрат [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, стиль радиокнопки Каким образом создается стиль радиокнопки CSS? [Уловки CSS] 
 Все мы знакомы с флажком  HTML и переключателем  CSS. Больше всего в них расстраивает то, что мы не можем изменить их внешний вид. Они выглядят по-разному в зависимости от вашей операционной системы и браузера, и мы не можем стилизовать их с помощью CSS.
 Это может раздражать большинство дизайнеров, которые хотят сделать эти элементы привлекательными, чтобы они не портили дизайн. В этом уроке я покажу вам, как заставить их выглядеть по-настоящему мило с помощью простого трюка. Давайте копаться!
 Будь сильным. Скрыть флажки 
 Это может показаться нелогичным, но чтобы наши флажки и переключатели выглядели великолепно, мы должны скрыть их и забыть о них! Да, им больше не нужно задерживаться, поэтому мы просто применяем простое правило:
.раздел input [type = "radio"],
.section input [type = "checkbox"] {
  дисплей: нет;
}
 
 Но, Мэтью, вы можете сказать, что мы будем делать без них? Не беспокойтесь,  мы создадим собственные флажки, с блэкджеком и…  ну, давайте просто займемся этим.
 Переключатель CSS 
 Во-первых, наша разметка:
 <раздел>
    
      
        Кофе  
    
    
      
        Чай  
    
    
      
        Капучино  
    

 
 У нас есть раздел, в котором мы собираемся содержать три переключателя.Мы рассмотрим флажки далее в этом уроке, принцип тот же. Каждый ввод упакован в div с контейнером   class. Кроме того, каждый вход имеет метку с промежутком в ней.
 Важно!  Поскольку мы скрыли входы для радио и флажков, единственный способ получить к ним доступ - использовать тег label. Для правильной работы тег label должен содержать атрибут « for»  с идентификатором соответствующего входа. Если вход имеет идентификатор « radio-1» , тогда атрибут « for»  также должен быть « radio-1» .
 Вам может быть интересно, почему я заключил текст внутри каждой метки в диапазон:
 
      
        Кофе  

 
 Поскольку мы собираемся стилизовать радиокнопки с псевдоэлементами « :: before  и»  :: after , нам нужен родительский элемент, на основе которого они могут быть расположены. В данном случае это будет наш лейбл:
.этикетка контейнера {
  положение: относительное;
}
 
 Вот набор стилей, который используется как для флажков, так и для переключателей:
. Контейнер пролет :: до,
.container span :: after {
  содержание: '';
  позиция: абсолютная;
  верх: 0;
  внизу: 0;
  маржа: авто;
}
 
 Свойства Top и bottom установлены равными нулю и объединены с " margin: auto;"  позволяет нашим элементам иметь центрированное горизонтальное положение.
 Вот как выглядят остальные стили:
.container span.radio:hover {
  курсор: указатель;
}
.container span.radio::before {
  слева: -52px;
  ширина: 45 пикселей;
  высота: 25 пикселей;
  цвет фона: # A8AAC1;
  радиус границы: 50 пикселей;
}
.container span.radio::after {
  слева: -49 пикселей;
  ширина: 17 пикселей;
  высота: 17 пикселей;
  радиус границы: 10 пикселей;
  цвет фона: # 6C788A;
  переход: левый 0,25с, цвет фона 0,25с;
}
input [type = "radio"]: checked + label span.radio::after {
  слева: -27px;
  цвет фона: # EBFF43;
}

Самая важная часть - это последний набор правил, который, по сути, выполняет всю задачу.Псевдокласс «: checked» позволяет нам вносить изменения в элементы при проверке ввода. С помощью селектора «+» мы можем выбрать следующий родственный элемент и нацелить наш « span.radio» , где мы применяем новые правила к псевдоэлементу « :: after» . В этом случае мы меняем его положение по горизонтали и цвет.

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

`Флажки`

Если вам нужно создать настраиваемые флажки, метод тот же. Взгляните на стили:

 .container span.checkbox :: before {
  ширина: 27 пикселей;
  высота: 27 пикселей;
  цвет фона: #fff;
  слева: -35px;
  размер коробки: рамка-рамка;
  граница: 3px сплошная прозрачная;
  переход: цвет границы .2s;
}
.container span.checkbox: hover :: before {
  граница: 3px solid # F0FF76;
}
.container span.checkbox :: after {
  содержание: '\ f00c';
  семейство шрифтов: 'FontAwesome';
  слева: -31px;
  верх: 2 пикселя;
  цвет: прозрачный;
  переход: цвет.2с;
}
input [type = "checkbox"]: checked + label span.checkbox :: after {
  цвет: # 62AFFF;
}

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

 В сторону  Если вы хотите использовать значок FontAwesome в своем псевдоэлементе, вы должны включить его код в свойство content и указать свойство font-family как « FontAwesome» .Например:
 {
содержание: '\ f00c';
семейство шрифтов: 'FontAwesome';
}
 
 Коду « f00c»  предшествует обратная косая черта, которая требуется для экранирования символа Unicode. Юникод можно найти на странице выбранного вами значка:
 Окончательный результат 
 Вот и все. Теперь мы создали полнофункциональные и красивые флажки и переключатели, которые вы можете настроить и использовать в своих собственных проектах. Вы можете просмотреть полный исходный код в демонстрации CodePen:
 См. Кнопки переключателя Pen 
 и флажки 2 Мэтью Кейна (@matthewcain) 
 на CodePen.
 Видеоуроки 
 Лучше один раз увидеть, чем несколько раз прочитать. Некоторые люди предпочитают смотреть через плечо профессионалу, поэтому я выбрал 5 лучших (на мой взгляд, безусловно) видеоуроков по созданию пользовательских флажков и переключателей. Надеюсь, это поможет.
  
  
  
  
  
 HTML5 шаблоны веб-сайтов 
 Универсальный шаблон CMS - Bootstrap | Шаблон веб-сайта Laravel Framework 
 Демо | Скачать | Хостинг
 Если вы найдете это руководство полезным или у вас есть вопросы, не стесняйтесь делиться своими мыслями в комментариях ниже.Спасибо!
 FAQ 
  Что такое флажок стиля CSS?  Это небольшой интерактивный элемент, который пользователь может переключать, чтобы выбрать один из двух или более вариантов. Иногда его также называют полем выбора или флажком.
  Что такое радиокнопка стиля CSS?  Это элемент, с которым пользователь может взаимодействовать, чтобы сделать один выбор из нескольких вариантов. В отличие от флажка, он позволяет выбрать только один вариант из предложенных.
No related posts.