Радиокнопки css: Стилизация Radio Button

Содержание

Привлекательные радиокнопки HTML & CSS

На чтение 1 мин. Просмотров 650 Опубликовано 07.05.2020
Обновлено 07.05.2020

HTML

<form>
  <label>
    <input type="radio" name="radio" checked />
    <span>HTML</span>
  </label>
  <label>
    <input type="radio" name="radio" />
    <span>CSS</span>
  </label>
  <label>
    <input type="radio" name="radio" />
    <span>Javascript</span>
  </label>
</form>

CSS

form {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

label {
  display: -webkit-box;
  display: flex;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.375em;
}

label input {
  position: absolute;
  left: -9999px;
}

label input:checked+span {
  background-color: #ebe1eb;
}

label input:checked+span:before {
  box-shadow: inset 0 0 0 0.4375em #844685;
}

label span {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 0.375em 0.75em 0.375em 0.375em;
  border-radius: 99em;
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
}

label span:hover {
  background-color: #ebe1eb;
}

label span:before {
  display: -webkit-box;
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.375em;
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.125em #844685;
}

Радиокнопки с иконками

.radio-form {

display: flex;

justify-content: center;

margin: 30px 0;

}

.radio-form .radio-control {

width: 180px;

transition: all ease 250ms;

}

.radio-form .radio-control input {

display: none;

}

.radio-form .radio-control .radio-input {

background: #ffffff;

text-align: center;

padding: 20px;

border-radius: 10px;

cursor: pointer;

margin: 0 10px;

position: relative;

transition: all ease 250ms;

border: 4px solid #BFE2FF;

}

.radio-form .radio-control:hover .radio-input {

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 6px 12px rgba(0,0,0,0.2);

}

.radio-form .radio-control .radio-input i {

display: block;

font-size: 70px;

color: #BFE2FF;

font-weight: bold;

}

.radio-form .radio-control .radio-input img {

width: 70px;

}

.radio-form .radio-control .radio-input span {

font-family: Tahoma, sans-serif;

letter-spacing: 1px;

font-size: 18px;

font-weight: bold;

text-transform: uppercase;

display: block;

margin-top: 16px;

color: #AAA;

}

.radio-form .radio-control input:checked + .radio-input span {

color: #444444;

opacity: 1;

transition: opacity ease 250ms;

}

.radio-form .radio-control input:checked + .radio-input:after {

top: 0;

right: 20px;

transform: translateY(-50%);

animation-name: animation;

animation-duration: 250ms;

background-color: #FFF;

font-size: 25px;

display: block;

position: absolute;

border: 5px solid #FFF;

padding-left: 2px;

content: «\f058»;

font-family: «FontAwesome»;

font-weight: bold;

}

.radio-form .radio-control input:checked + .radio-input {

border: 4px solid #337AB7;

}

.radio-form .radio-control input:checked + .radio-input:after,

.radio-form .radio-control input:checked + .radio-input i {

color: #337AB7;

}

@keyframes animation {

0% {

transform: translateY(-50%) scale(0);

}

75% {

transform: translateY(-50%) scale(1.3);

}

100% {

transform: translateY(-50%) scale(1);

}

@media screen and (max-width: 768px) {

.radio-form {

display: block;

}

.radio-form .radio-control {

width: 100%;

margin-bottom: 30px;

}

Создавайте забавные анимированные радио кнопки с Radiobox.css

Стандартные переключатели HTML5 довольно скучны. Есть способы настроить их с помощью CSS3, но большинство методов фокусируются только на внешнем виде.

Radiobox.css фокусируется на внешности а также стиль добавления пользовательских CSS3-анимаций для радиовходов.

Эта библиотека абсолютно бесплатна и доступна с открытым исходным кодом. на GitHub скачивать. С помощью этой библиотеки CSS вы можете выбирать из более чем 12 различных анимаций, которые применяются к переключателям.

Читайте также: Дизайн пользовательского интерфейса: настройка флажков и кнопок радио с CSS3

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

Вы можете установить Radiobox прямо с npm или bower, или даже загрузить файлы локально на свой компьютер. GitHub хранит все свои файлы в CDN если вы хотите поиграть без загрузки чего-либо.
Единственный файл, который вам нужен, это radiobox.min.css, который должен находиться прямо в заголовке документа. Оттуда вы просто добавляете простой класс к каждой радиокнопке в зависимости от желаемой анимации.

Вот фрагмент кода для эффекта «boing»:

Обратите внимание, что анимация «boing» имеет собственный CSS-файл с именем boing.min.css. Это должно быть включено, если вы планируете использовать этот эффект на странице.

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

Для полной документации, проверьте основной репо вместе с живой демо-сайт, Если вы хотите связаться с создателями, вы можете отправить электронное письмо от Веб-сайт 720kb или сообщение через Twitter @ 720kb_,

Читайте также: типы ввода форм HTML5: дата, цвет и диапазон

            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Переключатели-флажки и радиокнопки на CSS3

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

Демонстрация работы – Скачать исходный код

Основы

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

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

Этот способ работает во всех современных браузерах, таких как Internet Explorer, Firefox, Opera и Chrome.

Чем можно воспользоваться

Так чем же можно воспользоваться, чтобы создать нужные эффекты? Мы можем использовать псевдоклассы :after, :before, чтобы не пришлось добавлять еще больше кода HTML. А для радиокнопок и переключателей-флажков можно использовать псевдокласс :checked. Еще можно использовать и другие псевдоклассы, такие как :hover и :active.

Используя эти псевдоклассы можно создать очень интересные и неповторимые элементы форм.

Начнем

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

<div>
		<label>Checkbox Small</label>
		<input type="checkbox" />
		<nput type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
	</div>
	<div>
		<label>Checkbox Big</label>
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
	</div>
	<div>
		<label>Radio Small</label>
		<div>
			<input type="radio" name="radio-1-set" checked />
			<input type="radio" name="radio-1-set" />
			<input type="radio" name="radio-1-set" />
			<input type="radio" name="radio-1-set" />
		</div>
	</div>
	<div>
		<label>Radio Big</label>
		<div>
			<input type="radio" name="radio-2-set" />
			<input type="radio" name="radio-2-set" />
			<input type="radio" name="radio-2-set" checked />
			<input type="radio" name="radio-2-set" />
			<input type="radio" name="radio-2-set" />
		</div>
	</div>

Перейдем к коду CSS. Мы задаем стили не самой форме ввода, а подписи. Так что обратимся к ней следующим образом:

.regular-checkbox + label { }

И зададим самим переключателям-флажкам и радиокнопкам свойство display: none;, чтобы они не отображались.

Теперь зададим стили маленькому переключателю-флажку. Добавим ему тени блока и границы:

.regular-checkbox {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

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

.regular-checkbox:active, .regular-checkbox:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.regular-checkbox:checked {
	background-color: #e9ecee;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

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

.regular-checkbox:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}

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

.big-checkbox {
	padding: 18px;
}
.big-checkbox:checked:after {
	font-size: 28px;
	left: 6px;
}

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

.regular-radio {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 50px;
	display: inline-block;
	position: relative;
}

.regular-radio:checked:after {
	content: ' ';
	width: 12px;
	height: 12px;
	border-radius: 50px;
	position: absolute;
	top: 3px;
	background: #99a1a7;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	text-shadow: 0px;
	left: 3px;
	font-size: 32px;
}

.regular-radio:checked {
	background-color: #e9ecee;
	color: #99a1a7;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

.regular-radio:active, .regular-radio:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.big-radio {
	padding: 16px;
}
.big-radio:checked:after {
	width: 24px;
	height: 24px;
	left: 4px;
	top: 4px;
}

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

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

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

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

Содержание статьи

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

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

.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:

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

***

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

— HTML — Дока

Кратко

Секция статьи «Кратко»

Тег <input> позволяет создавать интерактивные элементы на сайте — поле для ввода текста, кнопка, ползунок, переключатель и другие.

Пример

Секция статьи «Пример»

Создадим поле для ввода текста в одну строчку и ограничим количество допустимых символов в нём:

      
        <label for="name">Введите название (от 4 до 8 символов):</label><input  type="text"   name="name"  required  minlength="4"  maxlength="8"  size="10">
        <label for="name">Введите название (от 4 до 8 символов):</label>

<input
  type="text"
 
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10"
>

Как это понять

Секция статьи «Как это понять»

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

Как пишется

Секция статьи «Как пишется»

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

Атрибут type определяет, какой вид примет элемент <input> и какую функцию будет выполнять: например, для создания поля с паролем мы напишем type="password", чтобы сделать переключатель — type="radio", а для создания кнопки — type="button".

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

Атрибуты

Секция статьи «Атрибуты»

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

type

Секция статьи «type»

type — тип элемента <input>: текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text в одну строку.

Типы для ввода данных разных форматов:

text — поле для ввода текста в одну строку. Если попробовать вставить текст из нескольких абзацев, то они всё равно сложатся в одну строчку.
email — поле для ввода имейла. Браузер проверит, есть ли в нём знак «@» и домен.
search — поле для поиска.
tel — поле для ввода номера телефона.
url — поле для ввода URL-адреса.
password — ввод пароля. По мере ввода символы будут меняться на звёздочки ***. Можно задать минимальное и максимальное количество символов с помощью атрибутов minlength и maxlength.
number — ввод числа.

Типы для различных кнопок:

submit — простая кнопка для отправки формы.
button — обычная кнопка.
image — кнопка «Отправить» в виде картинки. Чтобы задать адрес картинки, используйте атрибут src, а для альтернативного текста — атрибут alt. Чтобы скорректировать размер изображения в пикселях, используйте атрибуты height и width.
reset — кнопка, которая сбрасывает всё, что пользователь ввёл в поля текущей формы ранее.

Типы для ввода дат:

date — ввод даты без времени: год, месяц и дата.
datetime-local — ввод даты и времени в текущем часовом поясе, когда зоны UTC не указываются.
month — ввод месяца и года, без указания часового пояса.
week — ввод номера недели.
time — ввод времени без указания часового пояса.

Элементы форм:

checkbox — флажки, или чекбокс, с несколькими вариантами на выбор.
radio — круглая кнопка-переключатель для выбора одного из нескольких вариантов.
range — ползунок для выбора чисел из заданного диапазона.
color — виджет для выбора цвета. Иногда его называют колорпикер (от английского colorpicker).
file — выбор файла для отправки.

И отдельно стоит значение hidden. Поле ввода с этим значением атрибута type не видно на странице, но в то же время оно отправляет своё значение на сервер.

value

Секция статьи «value»

value — значение элемента <input>, которое отправляется на сервер в формате «имя=значение». Имя задаётся атрибутом name, а значение — value. Например, <input type="radio" name="answer" value="a1">.

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

Прочие атрибуты

Секция статьи «Прочие атрибуты»

name — уникальное имя элемента. Обычно имя нужно, чтобы связать <input> с формой и отправить данные на сервер.
required — делает поле для ввода обязательным для заполнения. Пользователь не сможет нажать «Отправить», пока не введёт сюда данные. А если попробует, то браузер выведет сообщение о необходимости заполнить поле.
disabled — отключает элемент. Пользователь не сможет, например, ввести текст или выбрать нужный параметр, а сам элемент будет отображаться в сером цвете, как неактивный.
autocomplete — разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, пароль или номер банковской карты, чтобы данные подставлялись при следующем входе. Подробнее можно прочитать в статье про autocomplete.
autofocus — фокусируется на элементе <input> сразу после загрузки страницы. Это значит, что пользователю не нужно специально нажимать на этот элемент, чтобы начать в нём что-то писать. В фокусе может быть только один элемент на странице. Но это не может быть элемент типа hidden.
form — связывает отдельно стоящий элемент <input> с формой. Для этого укажите в качестве значения имя идентификатора, который задан нужному тегу <form>. Например, так form="special-form". Этот атрибут позволяет разместить <input> в любом месте на странице за пределами <form>. Если его не указать, элемент <input> будет связан с ближайшей формой.
list — связывает <input> с элементом <datalist> через его ID. В элементе <datalist> указывают значения, которые пользователь может выбрать, когда вбивает текст в пустое поле. Допустим, вы ввели букву «М» в поле ввода города, и браузер предложил варианты из <datalist>: «Москва», «Минск» и так далее. Этот атрибут не подходит для таких типов <input>, как hidden, password, checkbox, radio, file и любых кнопок.
readonly — не позволяет пользователю как-либо изменять элемент, оставляя его при этом рабочим. Применимо только для текстовых полей.

Подсказки

Секция статьи «Подсказки»

💡 Чтобы даже те, кто использует специальные средства для чтения с экрана (скринридеры), могли точно понять, что делает тот или иной <input>, используйте этот тег в паре с label.

Ещё пример

Секция статьи «Ещё пример»

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

      
        <form name="test" method="post" action="input1.php">  <label>    Текстовое поле в одну строчку:    <input type="text" size="40">  </label>  <fieldset>    Радио-кнопки:    <label>      <input type="radio" name="browser" value="ie">      Вариант 1    </label>    <label>      <input type="radio" name="browser" value="opera">      Вариант 2    </label>    <label>      <input type="radio" name="browser" value="firefox">      Вариант 3    </label>  </fieldset>  <label>    Большое текстовое поле:    <textarea name="comment" cols="40" rows="3"></textarea>  </label>  <div>    <input type="reset" value="Очистить">    <input type="submit" value="Отправить">  </div></form>
        <form name="test" method="post" action="input1.php">
  <label>
    Текстовое поле в одну строчку:
    <input type="text" size="40">
  </label>

  <fieldset>
    Радио-кнопки:
    <label>
      <input type="radio" name="browser" value="ie">
      Вариант 1
    </label>
    <label>
      <input type="radio" name="browser" value="opera">
      Вариант 2
    </label>
    <label>
      <input type="radio" name="browser" value="firefox">
      Вариант 3
    </label>
  </fieldset>

  <label>
    Большое текстовое поле:
    <textarea name="comment" cols="40" rows="3"></textarea>
  </label>

  <div>
    <input type="reset" value="Очистить">
    <input type="submit" value="Отправить">
  </div>
</form>

Открыть демо в новой вкладке

В работе

Секция статьи «В работе»

Дока Дог

Секция статьи «Дока Дог»

🛠 У <input> есть несколько полезных CSS-псевдоклассов. Например, <input> может иметь разные стили в обычном, сфокусированном и выключенном виде. А если между этими видами добавлять анимацию, можно сделать даже красиво. Например, как поля в Bootstrap, когда ты нажимаешь на <input>, он начинает плавно подсвечиваться обводкой.

🛠 Если вы используете <input type="radio"> или <input type="checkbox">, можно сами инпуты вообще скрыть: переключение будет работать при нажатии на лейбл. Так можно сделать очень красивые чекбоксы и радио-кнопки на чистом CSS. Например, я как-то сделал чекбоксы на сайте в стиле классических переключалок из iOS.

Радиокнопки, настроенные с помощью CSS

Сводка

Принцип

Радиокнопки — это элементы формы, которые позволяют пользователю выбрать один вариант из группы возможных вариантов.

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

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

Базовая база HTML

  <набор полей>
   Вопрос 
    
      
        
         Ответ 1 
      
      
        
         Ответ 2 
      
      […]

База CSS

  этикетка {
  заполнение: 0 0 0 2rem;
  положение: относительное;
}

input [type = radio] {
  позиция: абсолютная;
  непрозрачность: 0;
}

input [type = radio] + label :: before,
input [type = radio] + label :: after {
  содержание: '';
  позиция: абсолютная;
  радиус границы: 50%;
}

input [type = radio] + label :: before {
  осталось: 0.5рем;
  верх: 0,2 бэр;
  дисплей: встроенный блок;
  ширина: 0,8 бэр;
  высота: 0,8 бэр;
  окантовка: сплошной черный 0,05 бэр;
  фон: белый;
}

input [type = radio]: checked + label :: after {
  слева: 0,7 бэр;
  верх: 0,4 бэр;
  окантовка: сплошной черный 0,25 бэр;
}

input [type = radio]: focus + label :: before {
  контур: 0,05 бэр, пунктирный;
}

Демо

35+ приятных CSS-переключателей для ваших следующих проектов 2020

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

Хотя раньше кнопки не считались жизненно важным элементом стилизации, все больше и больше сайтов теперь адаптированы к использованию настраиваемых переключателей CSS. Стиль по умолчанию слишком прост, а дизайн плох, использование переключателей CSS обеспечивает дополнительный творческий подход к вашим веб-сайтам. Итак, в то время как остальной мир становится все больше и больше, сегодня мы решили, почему бы не присоединиться к нему? Таким образом, здесь, в uiCookies, сегодня мы составили список лучших из возможных вариантов, которые вы можете попробовать и скопировать для своего сайта.Сохраняйте вещи свежими, современными и стильными с помощью этих вариаций на вашем сайте.

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

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

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

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

Еще одна разновидность переключателя CSS на основе переключателя — переключатель slap. Он похож на тот, который мы упоминали ранее, однако, в отличие от простого переключения между опциями, он предоставляет сложную и творческую альтернативу.Два ответа при нажатии сразу меняют цвет, чтобы продемонстрировать свой выбор. И цвет не только переключается, но и использование классического старого эффекта пощечины и прыжка делает вещи более интересными. Это не только завораживает, но и добавление этого в любой раздел вашего сайта определенно может развлечь ваших пользователей на некоторое время.

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

Радио кнопка Jelly

Еще одно креативное дополнение к нашему списку лучших переключателей CSS — это Jelly Radio Button.Созданный с использованием мощной структуры CSS, он демонстрирует безупречный эффект Jelly вместе с переключателями. При выборе кнопки отображается что-то вроде яблочка, нацеленное на параметры, которые выбирают пользователи. И, как и в случае с обычным переключателем, один из них снимается, когда выбирается другой вариант. Шрифты основаны на шрифтах Google CSS и выглядят потрясающе.

Информация / Скачать

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

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

Информация / Скачать

Радио выбирает

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

Информация / Скачать

Входное радио CSS

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

Информация / Скачать

Просто очень простой переключатель

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

Информация / Скачать

Радиокнопка Google Dots

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

Информация / Скачать

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

Еще одна визуально приятная радиокнопка только для CSS — это вариант переключателя Animated. Пользователь может выбрать простой переключатель с различными опциями. По умолчанию выбран один из вариантов, который отличается анимированной сферой. Когда выбран любой другой вариант, сфера перемещается к выбранному ответу, меняя цвет.Этот анимированный переключатель CSS, использующий простой эффект скольжения влево и вправо, создает творческий вид на любом сайте.

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

Простой переключатель

Еще один минималистичный и упрощенный вариант для вас, чтобы попробовать эту радиокнопку Simple Toggle CSS. С помощью кнопки анимированного слайда у него есть два варианта ответа: да или нет. Ответ уже выбран по умолчанию, и если пользователи хотят его изменить, анимированные фигуры смещаются в противоположную сторону, чтобы выделить выделение.Вы можете использовать его для любого типа контактных форм, отзывов или разместить его по всему сайту, если вы хотите создать переключатели для нескольких запросов. Здесь также используется только CSS, который обеспечивает плавную и чистую работу.

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

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

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

Информация / Скачать

Strike Through Radio

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

Информация / Скачать

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

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

Информация / Скачать

Плоская радиокнопка

Имея плоский и современный вид, это одна из самых простых версий привлекательных переключателей CSS.Есть три разных 3D-значка, каждый из которых обозначает выбор. При нажатии на каждый из них отображается простой эффект CSS и изменяется его статус. Каждая коробка также отличается цветом при выборе и проста для использования и понимания пользователями. Простой, эффективный и полностью основан на HTML и CSS, без дополнительных сценариев JavaScripts и кодирования для удобного использования.

Информация / Скачать

Radio Checked Style

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

Информация / Скачать

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

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

Информация / Скачать

Радиокнопка выравнивания

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

Информация / Скачать

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

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

Информация / Скачать

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

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

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

Информация / Скачать

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

Если вы ищете простоту, обратите внимание на это замечательное дополнение от Wilder Taype. Название в значительной степени резюмирует это, радио типа ввода анимации пульсации и флажок.Нужно ли нам вообще объяснять это дальше? Кнопки или поля используют классическую анимацию CSS при демонстрации выбора по щелчку. В дополнение к этому также появляется простая галочка, когда кнопка меняет свой цвет, чтобы отметить выбор. Довольно легко понять и воспроизвести, почему бы не проверить это сами?

Информация / Скачать

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

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

Информация / Скачать

Кнопки радио

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

Информация / Скачать

Radio Hopping

Следующим на очереди у нас есть невероятно анимированная радиокнопка CSS от Джона Кантнера. Профессионально выглядящий и довольно приятный для глаз дизайн, выводящий простую анимацию переключателей на новый уровень. В основном здесь простые кнопки, простые на первый взгляд. Но создатель использовал значение скачкообразного изменения при нажатии на любую из доступных опций.По сути, он переключается между выделением со змеиным или червеобразным движением, переходящим от одной точки к другой. Последний штрих — изменение цвета при выделении конкретного варианта с черного на синий. В целом, простой и плавный механизм, но впечатляющий и привлекательный результат. Почему бы не взглянуть на структуру кода с помощью приведенного ниже кода?

Информация / Скачать

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

Теперь это более привлекательный вид переключателя CSS, который в основном вдохновлен шарами и столами для пула, поскольку он в значительной степени демонстрирует.Опции представлены затемненными кнопками, которые выглядят как лунка, в которую попадает мяч. И при нажатии на любую из них выбор в основном представляет собой шарообразную кнопку, скользящую вверх и вниз. Фон — еще один отличный вариант простого подхода с потрясающим результатом. Здесь вы можете увидеть деревянный и мраморный фон, который в основном добавляет привлекательности. Довольно простой и легкий, он достаточно интересен для ваших пользователей и является отличным началом для изучения основ работы анимации.Взгляните поближе на конечный результат и всю структуру, использованную для достижения результата, по ссылке ниже.

Информация / Скачать

Нейроморфное радио

Этот пример создателя Halvves — еще один потрясающий вариант, на который вы можете взглянуть. Хотя это выглядит довольно просто и минималистично с общим дизайном, здесь есть несколько довольно впечатляющих элементов. Морфинговое движение и трехмерный дизайн, чтобы выделить некоторые из основных. Неуморфный, как в значительной степени описывает название, эти переключатели демонстрируют плавный переход при выборе определенной опции.Почти как если бы вы буквально нажимали каждую из кнопок. Используя различные элементы, классы и действия, создатель сумел в значительной степени добиться этого реалистичного ощущения.

Информация / Скачать

Использование CSS для настройки стандартных флажков и радиокнопок для доступа к интерфейсу

Стандартные переключатели и флажки HTML часто являются одними из самых сложных элементов управления для настройки внешнего вида. Авторы часто прибегают к альтернативным методам реализации этих элементов управления, делая их недоступными для людей с ограниченными возможностями.Соответствующие стандарты доступности, такие как Руководство по обеспечению доступности веб-содержимого (WCAG) 2.0 SC 4.1.2, и обращаются к свойствам доступности для элементов управления пользовательского интерфейса. Цель четко сформулирована в текущих требованиях Раздела 508: «Когда электронные формы предназначены для заполнения в интерактивном режиме, форма должна позволять людям, использующим вспомогательные технологии, получать доступ к информации, элементам полей и функциям, необходимым для заполнения и отправки форма, включая все направления и подсказки.Поэтому авторы должны учитывать последствия настройки флажков и переключателей с использованием элементов, отличных от стандартных методов ввода. Хотя методы ARIA могут использоваться для создания доступных настраиваемых элементов управления, использование стандартных элементов ввода возможно и обеспечивает поддержку более широкого диапазона вспомогательных технологий и пользовательских агентов.

При реализации флажков и переключателей с использованием элементов div или span может возникнуть несколько проблем:

В отличие от стандартных методов ввода, программы чтения с экрана не могут отображать тип ввода, состояние ввода, метки и подсказки взаимодействия с клавиатурой.Пользователям программ чтения с экрана будет сложно идентифицировать эти элементы и взаимодействовать с ними. Хотя ARIA может быть альтернативой, авторы должны учитывать взаимодействие с клавиатурой.
Стандартные взаимодействия с клавиатурой потеряны. Как указывалось в предыдущем выпуске, авторы кода должны гарантировать, что моделируемый элемент управления ведет себя идентично стандартному переключателю или флажку. В противном случае пользователям, использующим только клавиатуру, в том числе зрячим пользователям, использующим только клавиатуру, будет сложно взаимодействовать и выбирать параметр.Авторы также должны убедиться, что код поддерживает несколько браузеров и вспомогательные технологии.
Когда изображения недоступны, природа входных элементов теряется. Пользователи с ослабленным зрением, которые используют режим высокой контрастности Windows или отключают цвета в Internet Explorer, могут столкнуться с трудностями при идентификации этих элементов как элементов управления формы. Авторы должны гарантировать, что когда изображения недоступны, элемент ввода по-прежнему отображается для пользователей.

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

Примеры

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

Флажки

Рис. 1. Флажки CSS для избранной музыки

Радиокнопки

Рис. 2. Переключатели CSS для пола

Код CSS

<стиль>

body {
font-family: arial, verdana, ‘sans-serif’;
размер шрифта: 100%;
}

набор полей {
ширина: 25%;
} легенда набора полей
{
font-weight: bold;
}

.пользовательский {
padding-bottom: 25px;
}

# a11yForm> .custom fieldset div {
position: relative;
z-index: 1;
}

# a11yForm> .custom fieldset input {
height: 16px;
осталось: 0;
маржа: 0;
отступ: 0;
позиция: абсолютная;
ширина: 16 пикселей;
z-index: 1;
}

# a11yForm> .custom input + label {
background: url (inputs.png) 0 -1px прозрачный без повтора;
высота: 18 пикселей;
отступ: 0 0 0 18 пикселей;
позиция: относительная;
z-index: 2;
}

# a11yForm>.custom.checkbox input + label {
background-position: 0 -1px;
}
# a11yForm> .custom.checkbox input: checked + label {
background-position: 0 -80px;
}

# a11yForm> .custom.radio input + label {
background-position: 0 -162px;
}
# a11yForm> .custom.radio input: checked + label {
background-position: 0 -260px;
}

# a11yForm> .custom input: focus + label,
# a11yForm> .custom input: hover + label {
outline: 1px сплошной зеленый;
}

/ * ДЛЯ IE 10 И ВЫШЕ; должен быть помещен в конец css * /
@media screen и (-ms-high-Contrast: active), (-ms-high-Contrast: none) {
# a11yForm>.пользовательский ввод + метка {
background-color: transparent;
}
}

HTML-код

Результат

Преимущества

JavaScript не требуется
Поддерживает навигацию с клавиатуры по умолчанию
Обеспечивает надежность всех вспомогательных технологий
Легко изменить / обновить
Требуется базовый опыт работы с HTML

Недостатки

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

Пользовательский стиль Выберите CSS, флажки CSS и переключатели

ДЖЕЙД

.контейнер
.контрольная группа
h2 Флажки

label.control.control — флажок Первый флажок
ввод (установлен флажок type = ‘checkbox’)
.control__indicator

label.control.control — флажок Второй флажок
ввод (тип = ‘флажок’)
.control__indicator

label.control.control — чекбокс отключен
ввод (type = ‘checkbox’ отключен)
.control__indicator

label.control.control — флажок Отключено и отмечено
ввод (type = ‘checkbox’ отключен, отмечен)
.control__indicator

.контрольная группа
h2 Радиокнопки

label.control.control — радио Первое радио
input (type = ‘radio’ name = ‘radio’ отмечен)
.control__indicator

label.control.control — радио Второе радио
input (type = ‘radio’ name = ‘radio’)
.control__indicator

label.control.control — радио отключено
input (type = ‘radio’ name = ‘radio2’ отключен)
.control__indicator

метка.control.control — радио отключено и отмечено
input (type = ‘radio’ name = ‘radio2’ отключен отмечен)
.control__indicator

.контрольная группа
h2 Выберите поля

.Выбрать
Выбрать
вариант Сначала выберите
вариант Вариант
вариант Вариант
.select__arrow

.Выбрать
Выбрать
вариант Второй выбор
вариант Вариант
вариант Вариант
.select__arrow

.Выбрать
выберите (отключено)
опция отключена
вариант Вариант
вариант Вариант
.select__arrow

СТИЛУС

$ цвет — белый = #FFFFFF
$ color — черный = # 000000
$ color — светло-серый = # E6E6E6
$ color — серый = #CCCCCC
$ color — темно-серый = # 7B7B7B
$ color — primary = # 048BA8
$ color — secondary = # 0E647D

html, body
высота 100%

тело
цвет фона $ — светло-серый
семейство шрифтов Source Sans Pro, без засечек

.контейнер
ширина 100%
высота 100%
дисплей гибкий
гибкая пленка
центр обоснования контента
центр выравнивания элементов

h2
семейство шрифтов ‘Alegreya Sans’, без засечек
font-weight 300
маржа сверху 0

// Поле для хранения элементов управления формой
.контрольная группа
отображать встроенный блок
вертикальное выравнивание по верху
фон $ цвет — белый
выравнивание текста по левому краю
box-shadow 0 1px 2px rgba (0, 0, 0, 0,1)
отступ 30px
ширина 200 пикселей
высота 210 пикселей
маржа 10px

// Основные стили управления
.контроль
блок отображения
положение относительное
padding-left 30 пикселей
нижнее поле 15 пикселей
указатель курсора
размер шрифта 18 пикселей

// Скрыть ввод браузера по умолчанию
Вход
абсолютное положение
z-индекс -1
непрозрачность 0

// Пользовательский элемент управления
.control__indicator
абсолютное положение
верхний 2px
осталось 0
высота 20 пикселей
ширина 20 пикселей
цвет фона $ — светло-серый

.control — радио &
border-radius 50% // Делает радиокнопки круговыми

// Наведите курсор и сфокусируйтесь
.управление: ввод при наведении ~ &,
.control input: focus ~ &
фон $ цвет — серый

// Проверено
.control input: проверено ~ &
цвет фона $ — основной

// Наведение, если отмечено
.control: ввод при наведении: нет ([отключено]): проверено ~ &,
.control input: проверено: focus ~ &
цвет фона $ — вторичный

// Скрыть ввод браузера по умолчанию
.control input: отключено ~ &
цвет фона $ — светло-серый
непрозрачность 0.6
указатель-события нет

&:после
содержание »
абсолютное положение
display none // Скрыть проверку

.control input: проверено ~ &
блок отображения // Показать чек

// Отметка флажка
.control — флажок &
осталось 8px
верхние 4 пикселя
ширина 3px
высота 8px
граница сплошная $ цвет — белый
ширина границы 0 2px 2px 0
преобразовать поворот (45 градусов)

// Отключен цвет галочки
.control — ввод флажка: отключено ~ &
border-color $ color — темно-серый

// Внутренний круг радиокнопки
.control — радио &
осталось 7px
верхний 7px
высота 6 пикселей
ширина 6 пикселей
радиус границы 50%
фон $ цвет — белый

// Отключенный цвет круга
.control — радиовход: отключен ~ &
цвет фона $ — тёмно-серый

.Выбрать
положение относительное
отображать встроенный блок
нижнее поле 15 пикселей
ширина 100%

Выбрать
отображать встроенный блок
ширина 100%
указатель курсора
отступ 10px 15px
наброски 0
граница 0
граница-радиус 0
цвет фона $ — светло-серый
цвет $ цвет — тёмно-серый
внешний вид нет
-webkit-appearance none
-moz-внешний вид нет

& :: — ms-расширение
не отображать

&: навести,
&: фокус
цвет $ цвет — черный
фон $ цвет — серый

&:отключен
непрозрачность 0.5
указатель-события нет

.select__arrow
абсолютное положение
верхние 16 пикселей
вправо 15 пикселей
ширина 0
высота 0
указатель-события нет
твердое тело в стиле границы
ширина границы 8px 5px 0 5px
border-color $ color — темно-серый прозрачный прозрачный прозрачный

.select select: hover ~ &
.select select: focus ~ &
border-top-color $ color — черный

.select select: disabled ~ &
border-top-color $ цвет — серый

Пользовательский флажок и переключатели с использованием Css

Пример переключателя CSS

BMW

Audi

Ferrari

Radio Buttons — Документация Gravity Forms

Сводка

Поле Radio Buttons позволяет пользователям выбрать один вариант из списка.Из доступных вариантов можно выбрать только один вариант. Он доступен в разделе «Стандартные поля» в редакторе формы.

Важно: Если метки вашего выбора содержат какие-либо HTML или специальные символы, такие как амперсанды, запятые, дефисы или скобки любого типа, вы ДОЛЖНЫ включить функцию отображения значений и дать каждому варианту простое и уникальное значение, которое не содержит любые специальные символы. Отсутствие настройки значений может вызвать проблемы для таких функций, как вычисления, условная логика, динамическое заполнение и проверка.

Общие настройки

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

Общие настройки

Настройка	Описание
Варианты выбора	Добавьте варианты выбора в это поле.Вы можете пометить каждый вариант как установленный по умолчанию, используя флажок, который появляется слева от каждого варианта. Добавьте новый вариант, щелкнув значок ПЛЮС, и удалите вариант, щелкнув значок УДАЛИТЬ.
Показать значения	Позволяет указать значение для каждого варианта. Значения выбора не отображаются для пользователя, просматривающего форму, но доступны администраторам при просмотре записи.
Массовое добавление / предопределенные варианты	Позволяет выбрать категорию и настроить предопределенные варианты или вставить свой собственный список для массового добавления вариантов.См. Примечание 1.
Включить вариант «Выбрать все»	Добавьте текстовый ввод в качестве окончательного выбора поля переключателя. Это позволяет пользователю указать значение, которое не является предопределенным выбором.

Примечания

1. См. Эту статью для получения дополнительной информации.

Дополнительные сведения об использовании тегов слияния см. В этих статьях.

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

 {Имя поля: 2.1: модификатор}

Модификаторы

Модификатор	Описание
: значение	Выводит значение поля вместо обычного текста выбора.
: валюта	Преобразует значение в значение валюты.

Расчеты

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

Пример: изменение отображения кнопок

Отображение выбора переключателей можно изменить с помощью категории gf_list готовых классов CSS.

Например, чтобы отображать варианты по горизонтали, а не по вертикали, введите gf_list_inline CSS ready class в поле Custom CSS Class на вкладке Appearance .

Это превращает список с множественным выбором во встроенный горизонтальный список (столбцы с неравномерным интервалом).

См. В этой статье список готовых классов CSS.

Super Sample Контактная форма: RADIO BUTTONS

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

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

Радиокнопки в формах веб-сайтов

В группе может быть выбран только один переключатель, как вы можете видеть в примере ниже. Если требуется несколько вариантов выбора, см. Наш учебник «Контактные формы с меню». Другие руководства по Forms можно найти на боковой панели.

Введение в учебное пособие

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

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

Образец контактной формы с радиокнопками

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

Контактная форма

Пожалуйста, нажмите «Отправить» после того, как сделаете свой выбор. Спасибо.

Учебник KeynoteSupport.com

Код для образца формы с радио-кнопками

Контактная форма

Пожалуйста, нажмите «Отправить» после того, как сделаете свой выбор. Спасибо.

Правила стиля CSS

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

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

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

↑ Вернуться к началу

Привлекательные радиокнопки HTML & CSS

HTML

CSS

Радиокнопки с иконками

Создавайте забавные анимированные радио кнопки с Radiobox.css

Переключатели-флажки и радиокнопки на CSS3

Основы

Чем можно воспользоваться

Начнем

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

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

Радиокнопки

Чекбоксы

Финал

— HTML — Дока

Кратко

Пример

Как это понять

Как пишется

Атрибуты

Прочие атрибуты

Подсказки

Ещё пример

В работе

Дока Дог

Радиокнопки, настроенные с помощью CSS

Сводка

Принцип

Базовая база HTML

База CSS

Демо

Комментарии

35+ приятных CSS-переключателей для ваших следующих проектов 2020

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

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

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

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

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

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

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

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

Радио кнопка Jelly

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

Радио выбирает

Входное радио CSS

Просто очень простой переключатель

Радиокнопка Google Dots

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

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

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

Простой переключатель

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

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

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

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

Strike Through Radio

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

Плоская радиокнопка

Radio Checked Style

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

Радиокнопка выравнивания

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

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

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

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

Кнопки радио

Radio Hopping

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

Нейроморфное радио

Использование CSS для настройки стандартных флажков и радиокнопок для доступа к интерфейсу

Примеры

Флажки

Радиокнопки

Код CSS

HTML-код

Флажки

Radio buttons

Результат

Преимущества