Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

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

Содержание

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор блюд

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

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

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

Автор Stas Melnikov 

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

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

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

Автор: Tommaso Poletti

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вариант 1

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

Вариант 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вариант 1

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

Вариант 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

 



Просмотров:
1 266

Библиотека для стилизации чекбоксов на чистом css

Представляем на ваш суд отличную легкую библиотеку, созданную lokesh-coder и предназначенную для стилизации и кастомизации чекбоксов на чистом css.

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

Преимущества кастомизации чекбоксов и радиокнопок с помощью данной библиотеки:

  • Базовые
    • Фигуры — Квадрат, скругленная, круг
    • Варианты — Стандартный, заполненный, с тонкой обводкой
    • Цвета — primary, success, info, warning и danger
    • Варианты заполнения — заливка или обводка
    • Анимации — плавная, tada, jelly, pulse, с поворотом
  • Переключатель в стиле iOS
  • Адаптивность
  • Отсутствие javascript
  • Кастомный иконочный шрифт
  • Поддержка изображений
  • SVG иконки
  • Возможность переключения между иконками\svg\изображениями 
  • «Блокировка» для input type=»checkbox»
  • Поведения — focus, hover, indeterminate
  • Поддержка фреймворков таких как Bootstrap, Foundation, Semantic UI, Bulma …
  • Кастомизация с помощью SCSS 
  • Поддержка всех современных браузеров, в том числе мобильных устройств
  • Стили для печати

Установка

Установка через npm или yarn

> npm install pretty-checkbox // or
> yarn add pretty-checkbox

После этого добавить pretty-checkbox.min.css в html

Подключение без скачивания через CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css"/>

Ручная загрузка

Загрузка исходного кода с GitHub 

SCSS

Также можете подключить pretty-checkbox.scss в ваш главный scss файл

@import '~pretty-checkbox/src/pretty-checkbox.scss';

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

Pretty Checkbox имеет множество встроенных стилей:







Название класса Описание
p-default Базовый стиль
p-switch  Переключатель в стиле iOS
p-icon Для вставки иконочного шрифта
p-svg Для вставки svg файла или разметки
p-image Для вставки изображения

И три возможных формы: p-round, p-curve, p-square (по умолчанию)

Пример кастомизированного чекбокса на codepen

See the Pen default pretty-checkbox by Alexey (@leshkacho) on CodePen.

Базовый чекбокс имеет три варианта начертания p-fill p-thick p-outline (по умолчанию)

Эти стили можно комбинировать:

See the Pen basic styles and combines pretty-checboxes by Alexey (@leshkacho) on CodePen.

Рассмотрим checkbox в виде переключателя в стиле iOS

See the Pen KZwoyq by Alexey (@leshkacho) on CodePen.

Вставка иконок, svg, и картинок

<!--Иконочный шрифт-->
	  <div>
		<input type="checkbox">
		<div>
		  <i></i>
		  <label>Check me</label>
		</div>
	  </div>
<!--svg-->
	  <div>
		<input type="checkbox">
		<div>
		  <img src="file.svg" />
		  <label>Check me</label>
		</div>
	  </div> <!--Так же поддерживается вставка svg с помощью тегов в тело документа-->
<!--Картинка-->
  <div>
    <input type="checkbox" />
    <div>
      <img src="/check.png" />
      <label>Block</label>
    </div>
  </div>


Цветовая схема

Существует 5 основных цветов для отображения чекбокса: p-primary p-success p-warning p-info p-danger

А так же 5 цветов для линии обводки

p-primary-o p-success-o p-warning-o p-info-o p-danger-o

Подробное представление:

See the Pen YYPaOK by Alexey (@leshkacho) on CodePen.

Анимации

See the Pen pretty-checkboxes animation by Alexey (@leshkacho) on CodePen.

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

Другие возможности

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

Возможно создание переключателей с заменой текста, иконки только на css!

Происходит это следующим образом

See the Pen toggle pretty-checkboxes by Alexey (@leshkacho) on CodePen.

Можно использовать разные иконки для обоих состояний переключателя

Кастомизация радио-кнопок на чистом css без js

радио кнопки добавляются идентично чекбоксам и с ними работают такие же классы

GitHub проекта Полная документация Скачать архивом с GitHub


Стилизация input type radio на чистом css3

Сегодня создадим стилизацию для поля формы input type radio. Наверное многие знают, что создать стили для радио кнопок не так просто. Так вот сегодня мы с вами создадим красивые радио кнопки при помощи css3 и никаких скриптов и тому подобных громоздких примудростей. В интернете конечно можно найти много интересных методов стилизации радио-кнопок, но они очень громоздкие и не всем понятные. Но я вам помогу решить — эту задачу быстро и без никаких javascript и jquery

Даже в самом CSS3 нет возможности на прямую редактировать стили для поля формы input type radio.

Но для создания стиля для поля radio можно обойти все возможные простые подходы.

Для примера давайте рассмотрим простой тип поля переключателя

Код HTML

<form action="" method="get">
<input name="Кнопка 1" type="radio" value="" checked>
Кнопка 1
 
<input name="Кнопка 2" type="radio" value="">
Кнопка 2
 
<input name="Кнопка 3" type="radio" value="">
Кнопка 3
 
<input name="Кнопка 4" type="radio" value="">
Кнопка 4
 
</form>

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

Пример как это работает

А сейчас просмотри как же стилизовать радио кнопки, input type radio?

HTML код

<ul>
    <li>
            <input type="radio" name="g">
            <label for="choice-a">
                <span><span></span></span>
                Choice A
            </label>
    </li>
    <li>
            <input type="radio" name="g">
            <label for="choice-b">
                <span><span></span></span>
                Choice B
            </label>
    </li>
    <li>
            <input type="radio" name="g">
            <label for="choice-c">
                <span><span></span></span>
                Choice C
            </label>
    </li>
    <li>
            <input type="radio" name="g">
            <label for="choice-d">
                <span><span></span></span>
                Choice D
            </label>
    </li>
</ul>

И вот собственно сам css для стилизации

CSS код

ul.radio-group li {
    position: relative;
    list-style: none;
    padding: 10px;
}
 
input[type="radio"] {
  opacity: 0;
  position: absolute;
}
 
/* Соответствует прямому потомку лейбла, которому предшествует a
   радио-кнопка */
input[type="radio"] + label > span {
  position: relative;
  border-radius: 12px;
  width: 14px;
  height: 14px;
  background-color: #FFFFFF;
  border: 1px solid #bcbcbc;
  margin: 0 1em 0 0;
  display: inline-block;
  vertical-align: middle;
}
 
 
 
/* Соответствует промежутку, содержавшему прямым потомком
   из лейбла, которому предшествует проверенная радио-кнопка */
input[type="radio"]:checked + label > span span {
   display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    left: 4px;
    top: 4px;
    border-radius: 4px;
    border: none;
    background: #e00e17;
}

Еще один пример

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

Код HTML

<div>
<form>
<input type="radio" name="radio" checked="">
<label for="radio1">Кнопка 1</label>
</form>
</div>
 
<div>
<form>
<input type="radio" name="radio">
<label for="radio2">Кнопка 2</label>
</form></div>
 
<div>
<form> 
<input type="radio" name="radio">
<label for="radio3">Кнопка 3</label>
</form></div>
 
<div>
<form> 
<input type="radio" name="radio">
<label for="radio4">Кнопка 4</label>
</form>
</div>

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

Код CSS

form {
    margin: 40px 0;
}
 
div {
    clear: both;
    margin: 0 50px;
}
 
label {
  width: 200px;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}
 
/* hide input */
input.radio:empty {
    margin-left: -999px;
}
 
/* style label */
input.radio:empty ~ label {
    position: relative;
    float: left;
    line-height: 2.5em;
    text-indent: 3.25em;
    margin-top: 2em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
input.radio:empty ~ label:before {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '';
    width: 2.5em;
    background: #D1D3D4;
    border-radius: 3px 0 0 3px;
}
 
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
    content:'\2714';
    text-indent: .9em;
    color: #C2C2C2;
}
 
input.radio:hover:not(:checked) ~ label {
    color: #888;
}
 
/* toggle on */
input.radio:checked ~ label:before {
    content:'\2714';
    text-indent: .9em;
    color: #9CE2AE;
    background-color: #4DCB6D;
}
 
input.radio:checked ~ label {
    color: #777;
}
 
/* radio focus */
input.radio:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}

Вот и все пользуйтесь! Конечно для подгона под свои нужды сам css можно изменять подстраивать эксперементировать.

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

Делаем красивые кнопки выбора (стилизация radio input)

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

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

Разметка

Нам понадобится всего несколько дополнительных элементов: при написании разметки формы, вам потребуется обернуть каждую пару input + label в блочный элемент, в моём случае это div с классом form-item и так же поступить с этими div’ами, у меня это контейнер с классом radio-container. Вы наверняка уже сталкивались ранее с подобным подходом, если использовали Boostrap Framework.

Я набросал макет для 2, 3 и 4 кнопок выбора (не рекомендую использовать данный подход для большего количества элементов, в таком случае лучше воспользоваться выпадающим списком):

<form>
<div>
<div>
<input type=»radio» name=»option1″ checked>
<label for=»radio1″>radio1</label>
</div>
<div>
<input type=»radio» name=»option1″>
<label for=»radio2″>radio2</label>
</div>
</div>
</form>

<br>

<form>
<div>
<div>
<input type=»radio» name=»option2″ checked>
<label for=»radio3″>radio3</label>
</div>
<div>
<input type=»radio» name=»option2″>
<label for=»radio4″>radio4</label>
</div>
<div>
<input type=»radio» name=»option2″>
<label for=»radio5″>radio5</label>
</div>
</div>
</form>

<br>

<form>
<div>
<div>
<input type=»radio» name=»option3″ checked>
<label for=»radio6″>radio6</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio7″>radio7</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio8″>radio8</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio9″>radio9</label>
</div>
</div>
</form>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<form>

  <div>

      <div>

      <input type=»radio» name=»option1″ checked>

      <label for=»radio1″>radio1</label>

    </div>

      <div>

      <input type=»radio» name=»option1″>

      <label for=»radio2″>radio2</label>

    </div>

  </div>

</form>

 

<br>

 

<form>

  <div>

    <div>

      <input type=»radio» name=»option2″ checked>

      <label for=»radio3″>radio3</label>

    </div>

      <div>

      <input type=»radio» name=»option2″>

      <label for=»radio4″>radio4</label>

    </div>

      <div>

      <input type=»radio» name=»option2″>

      <label for=»radio5″>radio5</label>

    </div>

  </div>

</form>

 

<br>

 

<form>

  <div>

    <div>

      <input type=»radio» name=»option3″ checked>

      <label for=»radio6″>radio6</label>

    </div>

      <div>

      <input type=»radio» name=»option3″>

      <label for=»radio7″>radio7</label>

    </div>

    <div>

      <input type=»radio» name=»option3″>

      <label for=»radio8″>radio8</label>

    </div>

    <div>

      <input type=»radio» name=»option3″>

      <label for=»radio9″>radio9</label>

    </div>

  </div>

</form>

Стили

Для начала нам необходимо будет скрыть сами элементы выбора, я сделал это просто, при помощи свойства display: none. Теперь пользователю отображаются только элементы label, если вы не допустили ошибок в разметке, то по нажатию на них, элементы выбора должны активироваться, вы можете проверить это при помощи инструментов разработчика в вашем браузере.

Далее выравниваем label по горизонтали, вы можете сделать это несколькими способами:

  • При помощи свойства float: left;, применённого к элементам label. Я не рекомендую данный подход, так как он в некоторых ситуациях, может сломать вёрстку, и, кроме того, вам придётся использовать хак в виде дополнительного элемента clearfix.
  • Использовать свойство display: inline-block;, для элементов label. Данный подход я использовал ранее, до того как практически во всех браузерах появилась поддержка flexbox.
  • Для родительского контейнера (в моём случае это radio-container) воспользоваться свойством display: flex;

Я использую третий вариант, flexbox поддерживаться практически во всех браузерах, если вы хотите поддерживать IE, этот подход вам не подойдёт.

Далее нам осталось лишь показать пользователю какой элемент активен на данный момент, сделать это очень просто, но есть один нюанс: ваш элемент input должен следовать перед элементом label, иначе css свойство, приведённое ниже, работать не будет.

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

.radio-container .radio-btn input:checked + label{
background-color: #0082fe;
color: #fff;
}



.radio-container .radio-btn input:checked + label{

  background-color: #0082fe;

  color: #fff;

}

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

Как видно из записи, активный элемент будет другого цвета и текст будет белым, в моём примере этого достаточно.

Результат

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

Можно немного изменить стили и получить такой результат:

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

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

comments powered by HyperComments

: The Field Set element — HTML

HTML-элемент <fieldset> используется для группировки нескольких элементов управления без веб-форм.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Пример выше показывает, как элемент <fieldset> группирует части HTML-формы, а вложенный элемент <legend> даёт заголовок для <fieldset>. Он может иметь несколько атрибутов, самый используемый из них form, который содержит id формы <form> на этой же странице. Этот атрибут позволяет сделать <fieldset> частью формы <form> даже если он не находится внутри неё. Также вы можете отключить <fieldset> и всё его содержимое с помощью атрибута disabled.

Этот элемент включает в себя глобальные атрибуты (en-US).

disabled HTML5
Если этот логический атрибут установлен, все элементы управления формой, вложенные в <fieldset> будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму <form>, в отличие от атрибута disabled на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента <legend> не будут отключены.
form HTML5
Этот атрибут принимает значение атрибута id элемента <form>, с которой вам нужно связать <fieldset>, даже если он находится вне формы.
name HTML5
Имя, связанное с группой.
Примечание: Заголовок для устанавливается первым <legend> внутри него.

Есть несколько особенностей стилизации <fieldset>

По умолчанию, значение свойства display равняется block, что создаёт блочный контекст форматирования. Если установить значение display как inline-элементу <fieldset>, это будет работать как inline-block, в ином случае, это будет работать как block. По умолчанию, имеется border 2px groobe вокруг содержимого и небольшой внутренний отступ. Элемент имеет min-inline-size: min-content по умолчанию.

Если задан <legend>, он будет помещён поверх верхней границы. <legend> сжимается и переносится, также имеет свой контекст форматирования. Значение display блочное (например, display: inline работает как block).

Простой fieldset

Этот пример показывает простой <fieldset> с <legend> и единственным элементом управления внутри.

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

Отключённый fieldset

Этот пример показывает отключённый <fieldset> с двумя элементами управления внутри.

<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" value="Chris">
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" value="Wookie">
    </div>
  </fieldset>
</form>

BCD tables only load in the browser

  • Другие связанные элементы:

html — Как мне изменить цвет радио кнопок?

Как упомянул Фред, нет способа встроить радио-кнопки в цвет, размер и т.д. Но вы можете использовать псевдоэлементы CSS, чтобы установить самозванца для любой данной радиокнопки и стилизовать его. Касаясь того, что сказал JamieD, о том, как мы можем использовать псевдоэлемент: after, вы можете использовать оба: before и: after для достижения желаемого вида.

Преимущества этого подхода:

  • Разработайте свою радио-кнопку, а также добавьте метку для контента.
  • Измените цвет внешнего обода и/или отмеченный круг на любой понравившийся вам цвет.
  • Придайте ему прозрачный вид с изменениями свойства цвета фона и/или необязательным использованием свойства непрозрачности.
  • Масштабируйте размер своей радиокнопки.
  • При необходимости добавьте различные свойства теней, таких как CSS.
  • Смешайте этот простой трюк CSS/HTML с различными Grid-системами, такими как Bootstrap 3.3.6, чтобы он визуально соответствовал остальным компонентам Bootstrap.

Объяснение короткой демонстрации ниже:

  • Установите относительный встроенный блок для каждой радиокнопки
  • Скройте родной смысл переключателя, нет способа напрямую его стилизовать.
  • Стиль и выравнивание этикетки
  • Перестройка CSS-содержимого на псевдоэлементе: before для выполнения двух действий — стилизация внешнего края переключателя и установка первого элемента (слева от содержимого метки). Вы можете узнать основные шаги по псевдоэлементам здесь — http://www.w3schools.com/css/css_pseudo_elements.asp
  • Если установлен переключатель, запросите метку для отображения содержимого CSS (выделенная точка в переключателе) впоследствии.

HTML

<div>
    <input type="radio" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div>
    <input type="radio" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

A короткая демонстрация чтобы увидеть это в действии

В заключение, JavaScript, изображения или батареи не требуются. Чистый CSS.

Стилизация checkbox и radio на CSS · GitHub

css — Стилизация checkbox и radio на CSS · GitHub

Instantly share code, notes, and snippets.

css — Стилизация checkbox и radio на CSS

label
input(type=»checkbox»).checkbox
span.checkbox-custom
span.label AGB
===
.checkbox
display: none
/* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */
.checkbox-custom
position: relative // Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */
width: 20px // Обязательно задаем ширину */
height: 20px // Обязательно задаем высоту */
border: 2px solid #ccc
border-radius: 3px
.checkbox-custom,
.label
display: inline-block
vertical-align: middle
/* Если реальный чекбокс у нас отмечен, то тогда добавляем данный признак и к нашему кастомному чекбоксу */
.checkbox:checked + .checkbox-custom::before
content: «» //* Добавляем наш псевдоэлемент */
display: block // Делаем его блочным элементом */
position: absolute //* Позиционируем его абсолютным образом */
/* Задаем расстояние от верхней, правой, нижней и левой границы */
top: 2px
right: 2px
bottom: 2px
left: 2px
background: #413548 //* Добавляем фон. Если требуется, можете поставить сюда картинку в виде «галочки», которая будет символизировать, что чекбокс отмечен */
border-radius: 2px
****
<label>
<input type=»radio» name=»radio-test»>
<span></span>
<span>Lorem ipsum dolor sit amet, consectetur</span>
</label>
===
.checkbox,
.radio {
display: none;
}
.checkbox-custom,
.radio-custom {
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 3px;
position: relative;
}
.checkbox-custom,
.radio-custom,
.label {
display: inline-block;
vertical-align: middle;
}
.checkbox:checked + .checkbox-custom::before,
.radio:checked + .radio-custom::before {
content: «»;
display: block;
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
background: #413548;
border-radius: 2px;
}
.radio-custom,
.radio:checked + .radio-custom::before {
border-radius: 50%;
}
//https://webcareer.ru/stilizaciya-checkbox-i-radio-na-css.html

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

Каким образом создается стиль радиокнопки CSS? [Уловки CSS]

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

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



Будь сильным. Скрыть флажки

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

 .section input [type = "radio"],
.section input [type = "checkbox"] {
  дисплей: нет;
}
 

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


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

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

 <раздел>
    

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


Важно!

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

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

 

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

.этикетка контейнера {
  положение: относительное;
}
 

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

 .container span :: before,
.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?

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

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

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


Читайте также

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

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

В то время наиболее надежным способом стилизации этих элементов управления формы без воссоздания их с нуля с помощью ARIA было визуальное скрытие переключателя или флажка, а затем воссоздание элементов управления с помощью или < span> и их псевдоэлементы ( :: до и :: после ). Потребность в этом подходе была в значительной степени, но не полностью, из-за того, что Internet Explorer и Legacy Edge не обеспечивали наилучшей поддержки для непосредственного стилизации самих элементов HTML .И если вы вернетесь еще дальше в прошлое, во всех браузерах были препятствия для непосредственной стилизации этих элементов управления.

Нельзя сказать, что в 2018 году нельзя было напрямую стилизовать собственные переключатели и флажки (см. Измененные переключатели) и измененные флажки). Но требовались обходные пути и ограничения стиля, которые все еще существовали из-за несоответствий с Firefox, Internet Explorer и до Chromium Edge.

Теперь (2021 г.), когда поддержка Internet Explorer упала слева и справа, а Edge теперь основан на Chromium, а причуды Firefox устранены, эти ограничения в значительной степени сняты.

Надеюсь, это последний раз, когда я пишу на эту тему.

Что необходимо для изменения стиля радиоприемников и флажков?

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

  



  
  



  

Необходимый CSS

Существует множество свойств CSS, которые переключатели и флажки будут уважать по умолчанию, но чтобы начать с нуля (что, если вы изменяете стиль этих элементов управления, вероятно, вы все равно хотите), первое, что нам нужно сделать, это очистить их всех стилей по умолчанию.Для этого мы используем свойство Appearance: none .

Примечание: для этих конкретных компонентов, я не сталкивался с какими-либо непредвиденными проблемами при использовании свойства без префикса . Но, согласно caniuse.com, Webkit по-прежнему требует префикса -webkit- . Как правило, лучше перестраховаться, чем сожалеть, так что, хотя и раздражает необходимость иметь как префикс -webkit-appearance , так и внешний вид , можно пока оставить его в том же духе.

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

Вы можете поиграть со следующим переключателем и флажком CodePen.Попробуйте добавить dir = rtl к содержащим

элементам или установите для одного из элементов управления значение disabled .

См. Перо
Пользовательская встроенная радиокнопка от Скотта (@scottohara)
на CodePen.

За пределами необходимого CSS и разметки

Может быть, вы думаете, что вам нужно больше, чем то, о чем здесь говорили. Три селектора для стилизации переключателя или флажка? «Пш», - воскликнете вы. «Я испытываю серьезное удовлетворение пользователей, которые нуждаются в добавлении этих рутинных элементов управления для выполнения основных задач в Интернете." Прохладный! Не стесняйтесь добавлять другие общие / презентационные элементы по своему усмотрению.

Например:

  

Приведенная выше разметка заключила флажок в содержащий элемент

, а для дополнительных элементов стиля были добавлены два дополнительных элемента с глупыми именами классов. Например, хотите создать эффект анимации при наведении, фокусировке или активации флажка? Теперь вы можете использовать родственные селекторы CSS (например.g., ~ или + ) и / или некоторый JavaScript, чтобы получить ваш Material Design. Просто не забудьте быть осторожным с z-индексированием, чтобы эти дополнительные элементы случайно не блокировали событие указателя (например, щелчок, касание) от доступа к элементу управления формы.

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

  
<тип ввода = флажок tabindex = -1 ария-скрытый = правда class = визуально-скрытый >
Название контроля

Вложенные интерактивные элементы, подобные описанным выше, абсолютно не нужны, и в зависимости от используемой вспомогательной технологии флажок «скрытый» может быть обнаружен (например, при построчной навигации с помощью VoiceOver в macOS или с помощью Dragon Naturally Speaking - как недавнее тестирование обнаружило).

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

Заключение и благодарность

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

Кроме того, я также весьма скептически отношусь к «необходимости» создания настраиваемых переключателей и флажков ARIA. Уровень усилий по созданию этих настраиваемых элементов управления и обеспечению наличия всех необходимых функций выходит далеко за рамки простого обновления CSS. Даже если вам нужно было создать роль ARIA = переключатель , стили CSS и полагаться на неявный , неявная функциональность проверила , это даст вам все, что вам нужно для стилизации собственного флажка в настраиваемый переключатель (третий пример на этой связанной странице).

Обновление 2021-09-25: спасибо Адриану Роселли за напоминание мне, что если я собираюсь напомнить людям не забывать стили для всех необходимых состояний флажков, то я не должен забывать включать неопределенный / aria-checked = смешанные государственных дизайнов. Радиокнопка и флажок CodePen обновлен, чтобы продемонстрировать примеры флажков, использующих неопределенный IDL-атрибут и aria-checked = mixed .

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

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

Инструктор: [0:00] Теперь, когда наши стили оснащены визуальным индикатором на переключателях и флажках, нам нужно добавить стили для их состояния фокуса и отключить штат.

[0:09] Сначала займемся фокусом. Мы сможем объединить эти стили в нашем классе компонентов управления основной формой. Теперь, в то время как наше предыдущее состояние фокуса применяет изменение цвета границы и тень блока, мы хотим убедиться, что существует четкая визуальная разница, особенно для отмеченных радиомодулей и отмеченных флажков, которые также имеют фокус.

[0:31] Чтобы начать нашу прокрутку, мы начнем с определения, когда исходный ввод находится в состоянии фокуса, и мы собираемся использовать тень блока для нашего эффекта.Поскольку тени блока могут быть наслоены, верхний слой, ближайший к элементу, по существу создаст границу 0,5 м, которая создаст визуальное разделение между границей элемента управления и нашим вторым эффектом тени блока, который будет иметь радиус размытия и распространения, и примените наш основной цвет. Посмотрим, как это выглядит.

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

[1:19] Однако из-за способа построения нашей разметки мы не можем использовать соседний родственный селектор, потому что значение метки находится за пределами элемента управления вводом. Вместо этого мы можем использовать восходящий псевдоселектор под названием: focus-within. Мы разместили это в нашем основном компоненте управления формой. : focus-within, примененный к нашей метке, обнаружит это событие focus на собственном вводе и сможет применить дополнительные стили к элементам внутри.

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

[2:06] Теперь, когда мы добавили стили для фокуса, нам нужно завершить наши стили для отключенного состояния. Для этого нам нужно пересмотреть нашу разметку и добавить дополнительный класс к элементу form-control, то есть form-control с модификатором disabled, и мы добавим его ко всем нашим отключенным элементам управления.

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

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

[3:04] Наконец, мы будем использовать это значение черного rgba в качестве значения применяемого цвета на этикетке, которое обновляет цвет метки, чтобы служить дополнительным индикатором того, что элемент управления находится в отключенном состоянии.

[3:16] В этом уроке мы создали стиль для состояния фокуса как для радио, так и для флажков. Чтобы гарантировать, что состояние фокуса четко различимо для элемента управления, который был как отмечен, так и в фокусе, мы наложили наши эффекты тени прямоугольника так, чтобы сначала создать вид белой границы, а затем добавили тень прямоугольника, используя наш основной цвет.

[3:38] Мы также узнали, как использовать фокус внутри, чтобы обнаружить событие собственного фокуса внутри метки, чтобы также применить цвет, который повлиял на общий цвет метки. Затем мы добавили класс отключенного элемента управления формой к нашей метке для тех элементов управления, которые были отключены, и использовали его для обновления цвета метки и в элементе управления вводом, чтобы включить наш миксин с отключенным полем.

[4:00] Из-за того, как радиоиндикатор применялся с box-shadow, нам пришлось переопределить box-shadow, чтобы обновить его цвет в отключенном состоянии.

Стилизованные радиокнопки

Детали шаблона

Эти настраиваемые стили переключателей соответствуют одному из двух следующих шаблонов разметки:

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

Разметка узора: визуально скрытый стиль

  

Контейнер div служит крючком для укладки, используя position: relative; , чтобы сохранить абсолютно позиционированные дочерние элементы и псевдоэлементы относительно блока контейнера блока.

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

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

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

Стиль настраиваемого переключателя передается из состояния элемента управления собственной формы. Состояния переключателей : проверено, , отключено, и : focus будут отражены в пользовательском стиле с помощью родственных селекторов CSS. Например, input: checked ~ label: before {...}

2. Рестайлинговые радиоэлементы

Разметка паттернов: Рестайлинговая радиостанция

  <метка>
  
   Ярлык 
  

С помощью этого шаблона разметки радиокнопка изменена, ее собственный стиль полностью удален из-за появления CSS : none , а затем изменен стиль с использованием box-shadow s и border s.

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

Обратите внимание: что касается примечания к визуальному дизайну, в IE11 и Firefox до версии 60 есть проблемы с этим методом стилизации. Если вам необходимо поддерживать эти браузеры, этого шаблона может быть недостаточно, и вместо этого следует рассмотреть возможность визуально скрытого метода.

IE11 и Edge могут использовать :: - ms-check для изменения стиля переключателей и флажков. При использовании этого селектора с префиксом поставщика убедитесь, что стили флажка и переключателя не конфликтуют.

влияет на объявления программы чтения с экрана?

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

Создание радиогрупп со специальными стилями — Блог

Опубликовано

, 20 июля 2020 г.

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

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

Что делает радиогруппы и кнопки доступными?

Давайте начнем с сопоставления факторов, которые делают радиогруппу доступной и понятной для всех:

  1. Соответствующие радиокнопки должны быть сгруппированы вместе.
  2. Радиогруппы должны иметь название, описывающее суть выбора, который находится перед пользователем.

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

  1. Он должен быть настраиваемым, чтобы пользователи с клавиатурой могли дотянуться до него.
  2. Он должен иметь различимую индикацию фокуса, чтобы отмечать положение в последовательности фокуса для пользователей клавиатуры.
  3. Он должен программно выражать свою роль, чтобы вспомогательные технологии могли читать и объявлять его как переключатель.
  4. Он должен быть правильно помечен, чтобы он был понятен и удобен для пользователей вспомогательных технологий.
  5. Он должен выражать свое состояние (отмечен / не отмечен).

Реализация на практике

Разметка:

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

Ниже приведены примеры двух возможных вариантов обертывания и маркировки радиогрупп:
Вариант 1: использовать тег

для группировки и тег

для маркировки:

  
Название группы

Вариант 2: использовать WAI ARIA role = "radiogroup" для группировки и атрибут « aria-label » для невидимой маркировки:

  

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

  

Теперь давайте соберем все вместе и добавим метки для каждого переключателя:

  
Название группы

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

  

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

CSS:

Начнем с стилизации div-оболочки ( .radio-wrapper ). В этом примере div-оболочка определяет размеры переключателя и размер значка. Это только выбор стиля. Единственное свойство, которое важно для нашей цели, — это атрибут « position: relative », потому что он позволяет нам правильно позиционировать вход [radio] и складывать его поверх диапазона.

 . Радиообертка {
 положение: относительное;
 размер шрифта: 1 бэр;
 высота: 3бэр;
 ширина: 3бэр;
}  

Далее мы собираемся стилизовать элемент [type = ”radio”] .

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

Установите ширину и высоту ввода равными 100%, чтобы он занимал полный размер своего родителя.

Теперь установите его положение как абсолютное, чтобы мы могли расположить его поверх . Для той же цели установите его z-index равным « 0 ».

Наконец, установите для свойства « opacity » значение « 0 ». Это скроет визуально переключатель с зависимой фиксацией, но сохранит доступность и дерево рендеринга для клавиатур и программ чтения с экрана.

  .radio-wrapper> [type = "radio"] {
      курсор: указатель;
      высота: 100%;
 слева: 0;
  маржа: 0;
 непрозрачность: 0;
 позиция: абсолютная;
 верх: 0;
 ширина: 100%;
 z-индекс: 0;
}  

Вход [радио] настроен, так что теперь мы можем приступить к его стилизации.

Основными элементами для нашей цели являются:

позиция: относительная ; У этого есть 2 причины: первая — это возможность установить для своего z-index значение ниже, чем радио-кнопка, чтобы мы могли быть уверены, что он не будет блокировать нажатие самой радио-кнопки, а вторая — для позиционирования. его псевдоэлемент « :: after », который будет содержать заливку для отмеченной кнопки.

z-index: -1 ; , как упоминалось выше, нам нужно, чтобы диапазон находился под флажком.

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

Остальные свойства чисто для внешнего вида.

  .radio-wrapper> [type = "radio"] + span {
     граница: 0.2rem твердый # 51c0a8;
     радиус границы: 50%;
     дисплей: блок;
     высота: 100%;
     положение: относительное;
     ширина: 100%;
     z-индекс: -1;
}  

Для знака проверки радиосвязи я решил использовать псевдоэлемент s « :: after ».Мы хотим, чтобы он появлялся только при установленном переключателе, чтобы мы могли использовать селектор псевдокласса «: проверено ».

  .radio-wrapper> [type = "radio"]: checked + span :: after {
содержание: «\ 2731»;
верх: -0,2em;
слева: 0,2em;
цвет: # 51c0a8;
размер шрифта: 3em;
позиция: абсолютная;
}  

Пока вы добавили aria-hidden = "true" к , и пока он имеет достаточный контраст от фона, эта часть не повлияет на доступность, а только зависит от ваших требований к стилю.

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

  .radio-wrapper> [type = "radio"]: focus + span {
box-shadow: 1px 1px 2px 2px # 51c0a8;
}  

Вот и все! Теперь у нас есть доступная радиогруппа.

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

      с ролью = «radiogroup».
    2. Обозначьте группу, чтобы дать пользователям средства чтения с экрана контекст. Например, вы можете использовать элементы
      для видимой метки или «aria-label» для невидимой метки.
    3. Используйте вход [type = ”radio”] для функциональности и или
      для презентации.
    4. Сделайте так, чтобы API специальных возможностей игнорировали элемент представления, добавив к нему aria-hidden = «true».
  2. Стиль:
    1. Сделайте вход [type = ”radio”] визуально скрытым, сохраните его на деревьях рендеринга и доступности (непрозрачность: 0), чтобы сохранить преимущества его собственной семантики и доступности.
    2. Убедитесь, что вход [type = ”radio”] расположен поверх элемента стиля, чтобы он улавливал события щелчка мыши.
    3. Не забудьте обработать визуальную индикацию фокуса для удобства пользователей, использующих только клавиатуру.

Посмотреть на Codepen

90+ Радиокнопки на чистом CSS (примеры с открытым исходным кодом)

1.Стилизованные радиокнопки CSS

При выборе различных параметров наблюдайте, как точка-червь перескакивает с предыдущего на текущее! Концепция, основанная на этом выстреле Dribbble. Обновление 24.01.20: исправление, связанное с iOS Safari

Автор: Джон Кантнер (jkantner)

Дата создания: 22 января 2020 г.

Сделано с помощью: HTML, Sass

Теги: form control, radio-button, snake, worm

2. 2020 CSS Toggle Inputs

Автор: Аарон Икер (aaroniker)

Создано: 11 января 2020 г.

Сделано с помощью: HTML, SCSS, JS

3.Только CSS: Пользовательские радиокнопки

Автор: Abubaker Saeed (AbubakerSaeed)

Дата создания: 16 апреля 2019 г.

Сделано с помощью: HTML, CSS, JS

Теги: css, custom, радио, наведение, клавиатура

4. Неуморфные кнопки радио

Автор: половинки (половинки)

Дата создания: 5 февраля 2020 г.

Сделано с помощью: HTML, CSS

Теги: neumorphism , радио-кнопка, пользовательский интерфейс, программный интерфейс, неуморфный

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

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

Автор: Джон Кантнер (jkantner)

Дата создания: 11 февраля 2020 г.

Сделано с: HTML, Sass

Теги: элементы управления формы, радио-кнопки, скевоморфизм, cpc-texture, codepenchallenge

6. Bulgy Radio

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

Автор: Liam (liamj )

Создано: 18 мая 2019 г.

Сделано с помощью: HTML, SCSS, JS

Теги: радио, радио, анимация, гибкий, переключатель

7.Recreation: Переключатель тем карты

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

Подробнее

Автор: Дин Хидри (visualcookie)

Дата создания: 28 апреля 2019 г.

Сделано с помощью: HTML, SCSS, Babel

Теги: радио-кнопка, пользовательский интерфейс, анимация , блестки, капля

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

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

Автор: Бенджамин Кёлер (Benny29390)

Дата создания: 18 октября 2018 г.

Сделано с помощью: HTML, SCSS

Теги: радио, радио, кнопка ответа, радио-кнопка мобильная радиокнопка

9. Флажки и радио (темный / светлый) — Чистый CSS

Автор: Иван Гроздич (ig_design)

Дата создания: 9 апреля 2019 г.

Сделано с помощью: HTML, CSS , JS

Теги: флажок, радио, кнопка, анимация, градиент

10.Анимированные переключатели SVG

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

Автор: Андрей Шарапов (andrejsharapov)

Дата создания: 28 февраля 2019 г.

Сделано с помощью: Pug, SCSS

Предварительный процессор JS: SCSS

: Нет

HTML-препроцессор: Pug

Теги: svg, cubic-bezier, transform, background-clip

11.Get Fit CSS Radio Inputs

Автор: Brandon McConnell (brandonmcconnell)

Дата создания: 27 марта 2019 г.

Сделано с помощью: HTML, SCSS

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

Подсветка переключателя путешествует под землей На основе этого пера: https://dribbble.com/shots/4214518-Radio-button

Автор: Микаэль Айналем (айналем)

Дата создания: 15 января 2019 г.

Сделано с : HTML, CSS, JS

Теги: метро, ​​радио, меню, выбор, маска

13.Radio Button Dot-Slider (Pure CSS)

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

Автор: Brandon McConnell (brandonmcconnell)

Дата создания: 22 октября 2018 г.

Сделано с помощью: HTML, SCSS

Теги: range, no-js only, form, css , range-slider

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

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

Автор: Darin (dsenneff)

Дата создания: 29 апреля 2018 г.

Сделано с: HTML, SCSS

Теги: ui, ux, toggle, flexbox, css

9005 9005 Минимальный ввод CSS для радио

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

Автор: Jase (jasesmith)

Дата создания: 23 августа 2018 г.

Сделано с помощью: HTML, SCSS, JS

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

Автор: Дронка Рауль (rauldronca)

Создано: 6 августа 2018 г.

Сделано с помощью: HTML, CSS

17. Флажок и радио в MacOS Mojave Dark Mode

Автор: Andreas Storm (andreasstorm)

Создано: 13 июня 2018 г.

Сделано с помощью: HTML, Stylus

Теги: macos, темный режим, флажок, радио

18.Radio Input

Автор: Аарон Икер (aaroniker)

Сделано с помощью: HTML, SCSS

19. Радиокнопки Material Design

Автор: Andreas Storm (andreasstorm)

Дата создания: 25, 2018

Сделано с помощью: HTML, Stylus

Теги: material design, material, radio, radio-buttons

20. [CSS] Кнопка выравнивания

Уловки CSS: используйте flex-grow для перехода .вдохновлено кнопкой Alignment Парное программирование с RulinShyu и yuanyu, @ Happy CSSer — 27 с помощью VS Code Live Share

Автор: Rplus (Rplus)

Дата создания: 27 мая 2018 г.

Сделано с: Pug, SCSS

CSS Pre-processor: SCSS

JS Pre-processor: Babel

HTML Pre-processor: Pug

Теги: happy csser, radio, align, flexbox

21 .Slap Toggle

Автор: Ярив Фруенд (YarivFrd)

Дата создания: 6 января 2018 г.

Сделано с помощью: HTML, CSS, JS

22. Ui-snippets-template

Автор: Тамино Мартиниус (tamino-martinius)

Дата создания: 15 мая 2018 г.

Сделано с помощью: HTML, CSS, JS

Теги: радио, raiobutton, колебание, анимация, переход

23.Улыбка Toggle | HTML + CSS

Я хотел стилизовать переключатель с помощью CSS, используя состояние: checked ~ (classname). Вдохновлено: https://dribbble.com/shots/2619401-Smiler

Автор: Кэмерон Фицуильям (CameronFitzwilliam)

Дата создания: 15 января 2018 г.

HTML, HTML,

Теги: toggle, toggle-css, custom css

24. Чистый CSS — кнопки селектора радио SVG

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

Автор: Nikki Pantony (nikkipantony)

Дата создания: 5 января 2018 г.

Сделано с помощью: HTML, CSS, JS

Теги: svg, радио, кнопка, google design

25. Жидкая радиокнопка с использованием SVG и GSAP (GreenSock)

Автор: Райан ЛаБар (ryan_labar)

Дата создания: 2 июня 2017 г.

Сделано с помощью: HTML, SCSS, JS

26.Схема радиокнопки

Автор: LukasOe (lukasoe)

Дата создания: 13 февраля 2017 г.

Сделано с помощью: Haml, Sass

Предварительный процессор CSS: Sass

процессор: Нет

Предварительный процессор HTML: Haml

27. Входное радио

Автор: Андреас Шторм (andreasstorm)

Дата создания: 21 ноября 2017 г.

HTML

Сделано с: , Sass

Теги: радио, ввод, svg

28.Флажки и радиогруппы на основе материалов

Автор: Buddy Reno (BuddyLReno)

Дата создания: 12 сентября 2017 г.

Сделано с помощью: HTML, SCSS

Теги: материальный дизайн, анимация, флажок , радио, форма

29. JQuery | Обзор пользовательских радиокнопок

Автор: Тобиас Больоло (tobiasdev)

Дата создания: 25 июня 2017 г.

Сделано с помощью: HTML, CSS, JS

Теги: радио-кнопки, jquery, javascript, форма

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

Автор: Александр Репета (Zerk)

Дата создания: 10 апреля 2017 г.

Сделано с помощью: HTML, SCSS

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

Автор: Андрей Верещак (JoyZi)

Создано: 3 августа 2017 г.

Сделано на: HTML, SCSS, JS

32. Liquid Radio Button

Автор: Тамино Мартиниус (Zaku)

Создано: 2 июня, 2017

Сделано с помощью: HTML, CSS

Теги: радио, кнопка, жидкость, CSS, анимация

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

Автор: Дронка Рауль (rauldronca)

Дата создания: 23 марта 2017 г.

Сделано с помощью: HTML, SCSS

34. Jelly Radio Button

Sticky Radio Button Наслаждайтесь этим плоский и простой стиль переключателя только в ванильном CSS 🙂

Автор: Tommaso Poletti (tomma5o)

Дата создания: 18 мая 2016 г.

Сделано с помощью: HTML, CSS

Теги : css, радио, кнопка, радиокнопка, желе

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

Автор: Джошуа Уорд (joshua_ward)

Дата создания: 28 декабря 2016 г.

Сделано с помощью: HTML, SCSS, JS

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

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

Автор: WILDER TAYPE (wilder_taype)

Дата создания: 27 декабря 2016 г.

Сделано с помощью: HTML, CSS

Теги:

рябь, анимация, ввод, тип радио, флажок

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

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

Автор: Тристан Уайт (triss90)

Дата создания: 5 декабря 2016 г.

Сделано с помощью: HTML, SCSS

Теги : radio-button

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

Автор: skeddles (samkeddy)

Дата создания: 5 декабря 2016 г.

Сделано с помощью: HTML, SCSS

39.Radio Button Big Square [Just CSS]

Автор: Габриэль Феррейра (gabrielferreira)

Дата создания: 11 ноября, 2016

Сделано с помощью: HTML, SCSS, JS

40. Анимированный только CSS Флажок и радио переключатели

Автор: Коля Кучера (кольякутчера)

Дата создания: 12 октября, 2016

Сделано с помощью: HTML, Менее

41. Выбор радио: Flexbox и Fun

Автор : Адам Кларк (adamstuartclark)

Создано: 17 августа 2016 г.

Сделано с помощью: HTML, SCSS

42.Форма оформления заказа

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

Автор: Rosa (RRoberts)

Дата создания: 16 июля 2016 г.

Сделано с помощью: HTML, CSS

Теги: checkout, form, radio, labels, page

43. SVG Splat Radio Buttons

Узнайте, как создать индивидуальную анимацию splat на YouTube здесь: https://youtu.be/O6dc-sJm0Ho А вот ручка, которую я сделал во время этот учебник: http: // codepen.io / chrisgannon / pen / Xddawq /

Автор: Chris Gannon (chrisgannon)

Дата создания: 29 ноября 2015 г.

Сделано с помощью: HTML, CSS, JS

Теги: , splat, radio, button, goo

44. Just Very Simple Radio Buttons

Автор: Памела Дайн (pamdayne)

Дата создания: 17 апреля 2016 г.

Сделано с помощью: HTML, CSS

45.Концепция выбора входного радио только для CSS

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

Автор: web-tiki (web-tiki)

Дата создания: 5 мая 2016 г.

Сделано с помощью: HTML, CSS, JS

Теги: animation, css, input, радио

46. Ввод и радио-кнопка

Автор: Офелия Фурнье-Лафламм (opheliafl)

Дата создания: 22 февраля 2016 г.

Сделано с помощью: HTML, PostCSS

Теги: вход, радио-кнопка, css

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

Автор: Памела Дайн (pamdayne)

Дата создания: 17 апреля 2016 г.

Сделано с помощью: HTML, CSS

48. Чистый CSS Fancy Checkbox / Radio

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

Автор: Rau (raubaca)

Дата создания: 8 апреля 2016 г.

Сделано с помощью: HTML, SCSS, JS

Теги: css, checkbox , радио, ввод

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

4 различных способа простой настройки радиокнопок. Вдохновение: design.google.com/articles/evolving-the-google-identity/

Автор: Victor Freire (victorfreire)

Создано: 19 января 2016 г.

Сделано с помощью: HTML, CSS, JS

Теги: radio-button, google dots, material design

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

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

Автор: Фредрик Йенсен (fredjens)

Дата создания: 23 января 2016 г.

Сделано с помощью: HTML, SCSS

Теги: css, sass, switch, radio-button

51. Материал Radio Button

Автор: CODEARMADA (montechristos)

Дата создания: 14 января, 2016

Сделано с помощью: HTML, SCSS, JS

Теги: material, radio, morphsvg, gsap, угловой

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

Радиокнопки, стилизованные под настоящие кнопки. Только CSS.

Автор: Элиас Мейре (eliasmeire)

Дата создания: 5 декабря 2015 г.

Сделано с помощью: HTML, CSS

Теги: радио, кнопка, google, карты, css

53. Simple Toggle

Автор: magnificode (magnificode)

Дата создания: 28 сентября 2015 г.

Сделано с помощью: HTML, SCSS

Теги: toggle

54.Материальный дизайн — Radio Button CSS [SCSS]

Простой стиль радио ввода. Sass — это путь!

Автор: Лоренцо Д’Ианни (lorenzodianni)

Дата создания: 16 апреля 2015 г.

Сделано с помощью: HTML, SCSS

Теги: radio-button, radio scss, s стиль, материальный дизайн

55. Необычная радиокнопка, похожая на флажок

Работа в процессе

Автор: Stacy (stacy)

Дата создания: 17 сентября 2015 г.

Сделано с помощью: HTML, SCSS

Теги: radio, checkbox, css, label

56.Пользовательская радиокнопка CSS3 — Radiosplosion

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

Автор: sodapop (sodapop)

Дата создания: 3 сентября 2015 г.

Сделано на: HTML, SCSS

Теги: radio-button, radio, button, hamburger network, custom

57. Флажок CSS «Рябь / Волна» и переключатель

Анимируйте проверку и снятие флажка, используя SASS и Bourbon.

Автор: Мэтт Систо (msisto)

Дата создания: 5 февраля 2014 г.

Сделано с помощью: HTML, SCSS

Теги: css, флажок, радио, анимация

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

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

Автор: Caleb Duren (calebduren)

Дата создания: 2 августа 2015 г.

Сделано с помощью: Haml, SCSS

Предварительный процессор CSS: SCSS

: Нет

HTML-препроцессор: Haml

Теги: градиент, радио-кнопки, радио, скевоморфизм, кнопки

59.Стильные радиокнопки — только CSS

Автор: Simon Buisson (yunntan)

Создано: 15 января 2015 г.

Сделано с помощью: HTML, Less

Теги: radio, style, form

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

Автор: Мортен Олсен (mortenolsendk)

Дата создания: 8 июня 2015 г.

Сделано с помощью: HTML, меньше

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

A CSS Уловка для стилизации радиокнопки.Ресурс: http://css-tricks.com/almanac/selectors/c/checked/

Автор: Анджела Веласкес (AngelaVelasquez)

Дата создания: 3 января 2014 г.

Сделано на: HTML, CSS

Теги: css, прием, ввод, радио

62. Зачеркнутый радио

Эксперимент по зачеркиванию частей предложения как способ взаимодействия с радио-входами …

Автор : Эд Хикс (blucube)

Создано: 23 апреля 2015 г.

Сделано с помощью: HTML, SCSS

Теги: радио, форма, пользовательский интерфейс, зачеркивание, эксперимент

63.Blue Radio Input

Простой радиовход с использованием: checked psuedo class

Автор: Håvard Brynjulfsen (havardob)

Создано: 15 апреля 2016 г.

Сделано с помощью: HTML 9, SCSS 9000 Теги: ввод, радио, форма

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

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

Автор: Крис Хедстром (kristofferh)

Дата создания: 4 апреля, 2016

Сделано с помощью: HTML, SCSS

Теги: плоский, радио-кнопки

65.Radio Control

Автор: SitePoint (SitePoint)

Дата создания: 31 марта 2015 г.

Сделано с помощью: HTML, SCSS, JS

66. Радиокнопки

no JS, no img, полный em, редактируемый текст (гибкий)

Автор: Джонатан Левайян (jlwebart)

Дата создания: 29 января 2015 г.

Сделано с помощью: HTML, CSS

Теги: радио, кнопки , переключатель, ios

67.Плоское радио — Да / Нет

На основе пера Нейта Уайли «Стилизованные радиокнопки». Аналогичная концепция, но с плоским дизайном. Поиграйте с цветовыми переменными ($ красный, $ синий, $ зеленый), чтобы настроить цвета кнопок.

Автор: Мэтью Блод (mblode)

Дата создания: 7 сентября 2014 г.

Сделано с помощью: Pug, SCSS

Предварительный процессор CSS: Процессор SCSS

: Нет

HTML-препроцессор: Pug

Теги: плоский, радио, кнопка, форма, да

68.Awesome Toggle Button

Две очень симпатичные радиокнопки, соединенные вместе как тумблер.

Автор: Эндрю (theawesomecoder61)

Дата создания: 7 октября 2014 г.

Сделано с помощью: HTML, CSS, JS

Теги: radio, awesome, css

69. Radio Checked Style

Автор: Volker Otto (l4ci)

Дата создания: 30 сентября 2014 г.

Сделано с помощью: HTML, SCSS

Теги: форма , радио

70.2 элемента 1 Стильное радио

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

Автор: Tobias HarisonDenby (quagliero)

Создано: 8 сентября 2014 г.

Сделано с помощью: HTML, SCSS

Теги: радио, материал, формы, psuedo-elements 71. Радиокнопки с воздушным шаром

С некоторых радиокнопок добавлен скин, чтобы придать им повышенный эффект.

Автор: Крис Симари (roboteight)

Дата создания: 16 июля 2014 г.

Сделано с помощью: HTML, SCSS

Теги: css3, scss, переключатели, ui, ux

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

Первый пример некоторых простых настраиваемых флажков и переключателей, созданных с использованием чистого CSS. Они работают только в хроме, но используются в других браузерах. Загляните в ближайшее время, чтобы увидеть другие примеры.См. Также: — http://codepen.io/Sambego/pen/zDLxe — http: //codepen.io/Sambego/pen …

Подробнее

Автор: Sam (Sambego)

Дата создания: 5 июля 2014 г.

Сделано с помощью: HTML, SCSS, JS

Теги: checkbox, radio, css, scss

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

Изначально разветвлено от Bennett Feely’s Fluid Radio Buttons: http: // codepen.io / bennettfeely / pen / Bmzeg

Автор: Джо Рингенберг (jringenberg)

Дата создания: 19 июня 2014 г.

Сделано с помощью: HTML, SCSS

74. Simple 945 Simple Radio Group с использованием Css3

Автор: Игорь Амадо (ig0ramad0)

Дата создания: 13 мая 2014 г.

Сделано с помощью: Haml, Sass

Пре-процессор CSS:

000 Sass 9000 Препроцессор JS: Нет

Предварительный процессор HTML: Haml

Теги: css3, radio, flat, ios

75.Radio Button

Автор: Akshat (akshat46)

Дата создания: 17 января 2019 г.

Сделано с помощью: HTML, SCSS, JS

76. Пользовательская радиокнопка — CSS3

Автор: Selvaraj U (selvaraj)

Сделано с помощью: HTML, CSS

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

Некоторые радиокнопки и флажки

Автор: Мехмет Эрогул (мехметрогул)

Дата создания:

4 августа 2020 г.

Сделано с помощью: HTML, CSS

Теги: radiobutton, checkbox, custom, css, input

78.Радиокнопки 📻

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

Автор: Джемма Стайлз (GemmaStiles)

Дата создания: 12 мая 2020 г.

Сделано с помощью: HTML, SCSS

Теги: радио-кнопки

79. Другой радио-ввод

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

Автор: Grace Snow (grace-snow)

Дата создания: 11 февраля 2020 г.

Сделано с помощью: HTML, SCSS, JS

Теги: радио-кнопки, настраиваемый ввод

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

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

Автор: Майкл Берридж (mburridge)

Дата создания: 10 мая 2019 г.

Сделано с помощью: HTML, CSS, JS

Теги: радио-кнопки, пользовательские, отображение, всплывающая подсказка , всплывающие подсказки

81.Radio-btn-box

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

Автор: johalv (johalv)

Дата создания: 4 июня 2020 г.

Сделано с помощью: HTML, CSS

Теги: радио-кнопки, тип = «радио», коробки

82.Icon Transition: проверено

Когда вам нужно имитировать переход между двумя разными значками. Непроверенный переключатель имитирует этот значок материала — https://material.io/tools/icons/?search=radio&icon=radio_button_unchecked&style=round. В то время как проверенная версия использует актуальный значок.

Автор: Amanda (amandaIaria)

Дата создания: 25 сентября 2018 г.

Сделано с помощью: HTML, SCSS

Теги: scss, css, радио-кнопки, переходы, значки

83.Простые пользовательские флажки и радио-кнопки

Простая реализация специально созданных анимированных радио-кнопок и флажков

Автор: Maruti Avantsa (maruti_ram)

Дата создания: 18 марта 2017 г.

Сделано с: HTML, Sass, JS

Теги: флажки, переключатели, ionicons, sass, css

84. Индикатор выполнения только для CSS из флажков

Индикатор выполнения только для CSS с использованием переключателей.

Автор: Жак Мостерт (jayx)

Дата создания: 13 марта 2017 г.

Сделано с помощью: HTML, SCSS

Теги: css, формы, радиокнопки, индикатор выполнения

85. Пользовательские переключатели / кнопки флажков с идеальным выравниванием

Узнайте, как создавать настраиваемые доступные переключатели и кнопки флажков в CSS, которые идеально совпадают с их метками. Учебник по CodyHouse: https://codyhouse.co/blog/post/custom-accessible-radio-checkbox-buttons-vertical-alignment

Автор: CodyHouse (codyhouse)

Дата создания: 4 сентября, 2020

Сделано с помощью: HTML, SCSS

Теги: флажок, радио, кнопки, пользовательские

86.Флажок и радио Пользовательский ввод

Флажок пользовательского ввода и радио

Автор: frederic (fede19)

Дата создания: 5 мая 2020 г.

Сделано с помощью: HTML, SCSS

теги: checkbox , ввод, пользовательский

40+ лучших примеров радиокнопок CSS Бесплатно 2020 — Блог Avada

40+ лучших примеров CSS Radio Buttons из сотен обзоров CSS Radio Buttons на рынке (Codepen.io) на основе Avada Commerce Ranking, в которой используются оценки Avada Commerce, рейтинговые обзоры, результаты поиска и социальные показатели. Приведенные ниже обзоры были отобраны вручную экспертами Avada Commerce. Если ваш CSS Radio Buttons не включен в список, не стесняйтесь обращаться к нам. Лучшая коллекция CSS Radio Buttons css будет оценена и приведена в августе 2020 года. Вы также можете найти бесплатные примеры CSS Radio Buttons или альтернативы CSS Radio Buttons.

Вот 40+ лучших примеров радиокнопок CSS

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

Основные характеристики
  • — Создано 9 ноября 2017 г.
  • — Создано Shaw
  • — Создано с использованием технологии HTML / CSS / JS

Transform Toggles, will-change — это библиотека кнопок CSS, обеспечивающая современный и модный вид, один из дизайнов, созданных автором Шоу.

Что касается библиотеки кнопок переключателя, вам предоставлены 4 кнопки с именами соответственно 1 ГБ, 5 ГБ, 10 ГБ и 20 ГБ. Эти кнопки отображаются на градиентном фоне. Вы не ослышались! Это градиент, недавний тренд! Все 4 кнопки имеют форму квадрата, но одна из них будет увеличена, если вы нажмете на нее. Кроме того, чтобы показать, какой выбор вы сделали, выбранное вами поле будет явно отображаться.

Звучит привлекательно, не правда ли? Не сомневайтесь больше, идите прямо сейчас!

Возьми
Демо


Основные характеристики
  • — Создано 15 января 2015 г.
  • — Создано Simon Buisson
  • — Создано с использованием технологии HTML / CSS / JS

Стильные переключатели. Только CSS — это название шаблона переключателей CSS, одного из дизайнов, созданных автором Саймоном Буиссоном.Шаблон имеет очень модный и современный вид, поэтому, если это то, что вы ищете, попробуйте!

Чтобы быть более конкретным, фон представляет собой смесь фиолетового, белого и темно-синего цветов с модным эффектом градиента. Как вы можете видеть, в середине есть 4 кнопки, расположенные в вертикальном ряду, отмеченные цифрами от 1 до 4. Когда вы нажимаете кнопку, эта кнопка становится красной, указывая на ваш выбор. Между тем остальные кнопки по-прежнему белые.

Возьми
Демо


Стилизация радиокнопок Александра Репета

Основные характеристики
  • — Создано 10 апреля 2017 г.
  • — Создано Александром Репета
  • — Создано с использованием технологии HTML / CSS / JS

Стили радиокнопки — это шаблон радиокнопки CSS, представляющий модный вид, один из дизайнов, созданных автором Александром Репета.

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

С этим черно-белым шаблоном, не беспокойтесь, мы уверены, что он может придать современный вид вашему сайту!

Возьми
Демо


Основные характеристики
  • — Создано 23 апреля 2015 г.
  • — Создано Эдом Хиксом
  • — Создано с использованием технологии HTML / CSS / JS

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

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

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

Возьми
Демо


Ripple Animation On Input Type Radio And Checkbox by Wilder taype

.

Основные характеристики
  • — Создано 27 декабря 2016 г.
  • — Создано WILDER TAYPE
  • — Создано с использованием технологии HTML / CSS / JS

Ripple animation on input type radio and Checkbox — это шаблон переключателя CSS с креативным и уникальным дизайном, один из тех дизайнов, созданных автором WILDER TAYPE.

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

Попробуйте прямо сейчас!

Возьми
Демо


Radio Selects: Flexbox и Fun от Адама Кларка

Основные характеристики
  • — Создано 17 августа 2016 г.
  • — Создано Адамом Кларком
  • — Создано с использованием технологии HTML / CSS / JS

Radio Selects: Flexbox and Fun — это название шаблона переключателя CSS, одного из дизайнов, созданных автором Адамом Кларком.

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

Если вы ищете креативный и профессиональный вид для своего веб-сайта, не сомневайтесь и устанавливайте его!

Возьми
Демо


Основные характеристики
  • — Создано 6 декабря 2016 г.
  • — Создано skeddles
  • — Создано с использованием технологии HTML / CSS / JS

Radio Group using labels — это шаблон кнопки радио-группы CSS с винтажным и простым дизайном, один из тех дизайнов, созданных автором Skeddles.

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

Скачайте и примените этот эффект к вашему магазину прямо сейчас!

Возьми
Демо


Основные характеристики
  • — Создано 19 апреля 2016 г.
  • — Создано Saumitra Bose
  • — Создано с использованием технологии HTML / CSS / JS

Radio Buttons — это название шаблона переключателя CSS, одного из дизайнов, созданных автором Саумитрой Бозе.

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

Этот шаблон создает очень стильную и профессиональную атмосферу, поэтому, если это то, что вы ищете, просто сделайте это!

Возьми
Демо


Основные характеристики
  • — Создано 29 января 2015 г.
  • — Создано Джонатаном Левайлантом
  • — Создано с использованием технологии HTML / CSS / JS

Radio Buttons — это название зачеркнутого шаблона радиокнопки, одного из дизайнов, созданных автором Джонатаном Левайлантом.

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

Это так просто. Получите шаблон сегодня!

Возьми
Демо


Основные характеристики
  • — Дата создания 9 июня 2015 г.
  • — Создано Мортеном Олсеном
  • — Создано с использованием технологии HTML / CSS / JS

Стиль радиокнопки — это название шаблона радиокнопки CSS, одного из дизайнов, созданных автором Мортеном Олсеном.Шаблон разработан, чтобы быть выдающимся и профессиональным!

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

Возьми
Демо


Основные характеристики
  • — Создано 20 февраля 2015 г.
  • — Создано Якобом Гавадом
  • — Создано с использованием технологии HTML / CSS / JS

Пользовательский стиль ввода радиокнопок — это название профессионального и современного шаблона кнопок, одного из тех шаблонов, созданных автором Джейкобом Гавадом.

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

Давайте установим это на ваш сайт и наслаждаемся тем, что он приносит!

Возьми
Демо


Основные характеристики
  • — Создано 3 августа 2015 г.
  • — Создано Калебом Дуреном
  • — Создано с использованием технологии HTML / CSS / JS

Radio Button Input Scale — это название шаблона переключателя CSS, одного из дизайнов, созданных автором Калебом Дуреном.

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

Не сомневайтесь, попробуйте!

Возьми
Демо


Основные характеристики
  • — Создано 14 февраля 2017 г.
  • — Создано LukasOe
  • — Создано с использованием технологии HTML / CSS / JS

Radio Button Circuit — это шаблон переключателя CSS с уникальным и креативным дизайном, один из тех дизайнов, созданных автором LukasOe.

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

Это готовый шаблон, так что не стесняйтесь его попробовать!

Возьми
Демо


Основные характеристики
  • — Создано 12 ноября 2016 г.
  • — Создано Габриэлем Феррейрой
  • — Создано с использованием технологии HTML / CSS / JS

Radio Button Big Square [Just CSS] — это шаблон переключателя CSS, один из дизайнов, созданных автором Габриэлем Феррейрой.Внешний вид этого шаблона прост, но очень современен и профессионален.

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

Если вы ищете простой способ улучшить внешний вид своего веб-сайта, почему бы вам не взглянуть на него?

Возьми
Демо


Основные характеристики
  • — Создано 6 января 2018 г.
  • — Создано Nikki Pantony
  • — Создано с использованием технологии HTML / CSS / JS

Pure CSS — SVG Radio Selector Buttons — это библиотека кнопок выбора переключателя CSS, имеющая простой, но забавный вид, один из тех дизайнов, которые предоставил автор Никки Пантони.

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

Установите этот эффект CSS сейчас и начните оживлять свой сайт!

Возьми
Демо


Основные характеристики
  • — Создано 8 апреля 2016 г.
  • — Создано Rau
  • — Создано с использованием технологии HTML / CSS / JS

Чистый CSS Fancy Checkbox / Radio — это название шаблона переключателя CSS, одного из дизайнов, созданных автором Рау.

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

Надеюсь, что вы воспользуетесь этим шаблоном, попробуйте его!

Возьми
Демо


Основные характеристики
  • — Дата создания 2 июня 2017 г.
  • — Создано Тамино Мартиниусом
  • — Создано с использованием технологии HTML / CSS / JS

Liquid Radio Button — это стильный CSS-шаблон радио-кнопки, один из дизайнов, созданных автором Тамино Мартиниусом.

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

Придать вашему веб-сайту современный вид — это просто, вы можете начать с отличного шаблона кнопок!

Возьми
Демо


Основные характеристики
  • — Создано 17 апреля 2016 г.
  • — Создано Памелой Дэйн
  • — Создано с использованием технологии HTML / CSS / JS

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

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

Надеюсь, что вы воспользуетесь этим шаблоном, попробуйте его!

Возьми
Демо


Основные характеристики
  • — Дата создания 26 июня 2017 г.
  • — Создано Tobias Bogliolo
  • — Создано с использованием технологии HTML / CSS / JS
jQuery Custom Radio Buttons Survey — это шаблон опроса с радио-кнопками CSS, обеспечивающий модный и профессиональный вид, один из дизайнов, предложенных автором Тобиасом Больоло.

Что касается формы опроса с помощью переключателя, то он представлен в форме онлайн-опроса. В частности, у вас есть 5 вопросов, отображаемых в шаблоне, полном черного цвета. Каждый вопрос имеет 5 вариантов, которые вы можете выбрать в качестве ответа, соответственно от 1 до 5.1 в случайном порядке. Кроме того, внизу формы есть кнопка «Отправить», чтобы побудить ваших клиентов быстро заполнить форму.

Звучит интересно, правда? Вы можете пойти и получить это прямо сейчас!

Возьми
Демо


Основные характеристики
  • — Создано 18 мая 2016 г.
  • — Создано Томмазо Полетти
  • — Создано с использованием технологии HTML / CSS / JS

Jelly Radio Button — это шаблон переключателя CSS с креативным и современным дизайном, один из тех дизайнов, созданных автором Томмазо Полетти.

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

Этот готовый шаблон должен быть ключевым, если вы ищете современный вид, дерзайте!

Возьми
Демо


Входное радио от Андреаса Шторма

Основные характеристики
  • — Создано 21 ноября 2017 г.
  • — Создано Andreas Storm
  • — Создано с использованием технологии HTML / CSS / JS

Input Radio — это библиотека кнопок переключателя переключателей CSS, предлагающая приличный и минималистичный вид, один из тех дизайнов, которые дал автор Андреас Сторм.

Что касается библиотеки кнопок переключателя, вам предоставлены 3 кнопки, соответственно с именами «Вариант один», «Вариант два» и «Вариант три». Хотите поменять все тексты? Конечно, можно. Не стесняйтесь настраивать тексты, чтобы показать своим клиентам, какой выбор вы хотите им предоставить. Что касается флажка, это не флажок с галочкой, как многие другие. Три кнопки имеют форму круга, и каждая из них будет заполнена синей точкой, если выбрана.

Хотите иметь минимальный сайт? Это обязательно для вас!

Возьми
Демо


Основные характеристики
  • — Создано 15 марта 2018 г.
  • — Создано Munsheer Ek
  • — Создано с использованием технологии HTML / CSS / JS

Image Radio Buttons using Bootstrap 4 — это чистый и современный шаблон, один из тех, которые были разработаны автором Мунширом Эком.

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

Не сомневайтесь, если вам нужен базовый шаблон!

Возьми
Демо


Основные характеристики
  • — Дата создания 29 декабря 2016 г.
  • — Создано Джошуа Уорд
  • — Создано с использованием технологии HTML / CSS / JS

Hidden Radio Messages / Tooltips — это шаблон переключателя CSS с креативным и уникальным дизайном, один из тех дизайнов, созданных автором Джошуа Уордом.

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

Скачайте этот эффект прямо сейчас!

Возьми
Демо


Основные характеристики
  • — Создано 6 декабря 2015 г.
  • — Создано Элиасом Мейре
  • — Создано с использованием технологии HTML / CSS / JS

Радиокнопки Google maps Только CSS — это имя шаблона переключателя CSS, одного из дизайнов, созданных автором Элиасом Мейре.

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

Если вы ищете переключатели для интеграции с Google Maps, попробуйте их!

Возьми
Демо


Основные характеристики
  • — Создано 19 января 2016 г.
  • — Создано Виктором Фрейре
  • — Создано с использованием технологии HTML / CSS / JS

Google Dots Radio Buttons — это название шаблона переключателя CSS, одного из дизайнов, созданных автором Виктором Фрейре.

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

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

Возьми
Демо


Основные характеристики
  • — Создано 7 сентября 2014 г.
  • — Создано Мэтью Блодом
  • — Создано с использованием технологии HTML / CSS / JS

Flat Radio — Yes / No — это название зачеркнутого шаблона радиокнопки, одного из дизайнов, созданных автором Мэтью Блодом.

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

Этот шаблон с современным и профессиональным дизайном станет для вас хорошим выбором!

Возьми
Демо


Основные характеристики
  • — Дата создания 4 апреля 2016 г.
  • — Создано Крисом Хедстромом
  • — Создано с использованием технологии HTML / CSS / JS

Snacks — Flat Radio Button Inputs — это название зачеркнутого шаблона переключателя, одного из дизайнов, созданных автором Крисом Хедстромом.

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

Звучит просто, правда? Теперь все в ваших руках!

Возьми
Демо


Основные характеристики
  • — Создано 17 июля 2014 г.
  • — Создано Уиллом Муром
  • — Создано с использованием технологии HTML / CSS / JS

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

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

Установите эти кнопки и начните делать свой сайт более привлекательным!

Возьми
Демо


Основные характеристики
  • — Создано 23 марта 2017 г.
  • — Создано Dronca Raul
  • — Создано с использованием технологии HTML / CSS / JS

Custom Radio Buttons — это шаблон переключателя CSS с красочным, но современным дизайном, один из дизайнов, созданных автором Дронкой Рауль.

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

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

Возьми
Демо


Основные характеристики
  • — Создано 4 сентября 2015 г.
  • — Создано Sodapop
  • — Создано с использованием технологии HTML / CSS / JS

Custom CSS3 Radio Button — это имя шаблона переключателя CSS, одного из дизайнов, созданных автором Sodapop.

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

Вы должны понять это, если вы ищете модный вид для своего интернет-магазина!

Возьми
Демо


Основные характеристики
  • — Создано 4 января 2017 г.
  • — Создано Юнусом Эмре Баязыт
  • — Создано с использованием технологии HTML / CSS / JS

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

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

Давай попробуем прямо сейчас!

Возьми
Демо


CSS-флажок «Ripple / Wave» и переключатель от Matt sisto

Основные характеристики
  • — Создано 6 февраля 2014 г.
  • — Создано Мэттом Систо
  • — Создано с использованием технологии HTML / CSS / JS

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

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

Почему бы тебе не разобраться? Больше не сомневайтесь!

Возьми
Демо


Основные характеристики
  • — Создано 5 мая 2016 г.
  • — Создано web-tiki
  • — Создано с использованием технологии HTML / CSS / JS

Концепция выбора переключателя ввода только CSS — это название шаблона переключателя CSS, одного из дизайнов, созданных автором web-tiki.

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

Этот шаблон имеет простой, но привлекательный вид, поэтому, если вы ищете простоту, этот шаблон подойдет для вашего веб-сайта!

Возьми
Демо


Основные характеристики
  • — Создано 16 июля 2016 г.
  • — Создано Rosa
  • — Создано с использованием технологии HTML / CSS / JS

Форма оформления заказа — это имя шаблона оформления заказа CSS, одного из дизайнов, созданных автором Розой.

Чтобы углубиться в подробности, в форме оформления заказа есть 3 плана, соответственно названные. Первый включает планы Free, Basic и Premium. Второй предлагает ежемесячные и годовые планы, а последний — кредитную карту, дебетовую карту, Paypal. При нажатии на каждую кнопку она станет зеленой и будет отмечена белой галочкой, что означает, что это ваш выбор. Кнопка «Отправить» находится внизу.

Это базовый и простой вид, поэтому он подходит для многих стилей для многих веб-сайтов!

Возьми
Демо


Cambiando Estilos De Radio Buttons Y Checkbox by Ricardo Ortega chap

Основные характеристики
  • — Создано 22 января 2019 г.
  • — Создано Рикардо Ортега Чап
  • — Создано с использованием технологии HTML / CSS / JS

Cambiando estilos de radio buttons y checkbox — это название современного симпатичного шаблона кнопок, одного из тех шаблонов, разработанных автором Рикардо Ортега Чапом.

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

Давай попробуем прямо сейчас!

Возьми
Демо


Основные характеристики
  • — Создано 23 января 2016 г.
  • — Создано Fredrik Jensen
  • — Создано с использованием технологии HTML / CSS / JS

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

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

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

Возьми
Демо


Основные характеристики
  • — Дата создания 2 февраля 2016 г.
  • — Создано Chris M
  • — Создано с использованием технологии HTML / CSS / JS

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

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

Попробуйте сегодня, почему бы и нет?

Возьми
Демо


Основные характеристики
  • — Дата создания 12 октября 2016 г.
  • — Создано Коля Кучера
  • — Создано с использованием технологии HTML / CSS / JS

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

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

Если вы ищете забавный, но современный вид для своего веб-сайта, посмотрите его!

Возьми
Демо


Основные характеристики
  • — Создано 27 мая 2018 г.
  • — Создано Rplus
  • — Создано с использованием технологии HTML / CSS / JS

[CSS] Alignment button — это библиотека кнопок выравнивания CSS, имеющая простой, но очень современный и профессиональный вид, один из тех дизайнов, созданных автором Rplus.

Что касается библиотеки кнопок выравнивания, всего у вас есть 3 кнопки. Первый — для выравнивания по левому краю. Второй — для выравнивания по центру. И последний — для правильного выравнивания. Все три кнопки белого цвета. Следовательно, все значки должны быть черными. Важно отметить, что когда вы щелкаете по одному из них, чтобы сделать выбор, будет отображаться только тот, который вы выбрали. Между тем эти 2 кнопки будут скрыты.

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

Возьми
Демо


Основные характеристики
  • — Создано 18 октября 2018 г.
  • — Создано Бенджамином Келером
  • — Создано с использованием технологии HTML / CSS / JS

Mobile Radio Buttons с небольшой анимацией — это библиотека анимации кнопок CSS с забавным внешним видом, один из дизайнов, созданных автором Бенджамином Келером.

Что касается библиотеки анимации кнопок, вам предоставляется 3 варианта. Первый — Хьюи.Второй называется Дьюи. И последнего зовут Луи. При выборе одного из них флажок будет заполнен значком галочки. 3 опции обведены оранжевым цветом. Подобно их коробке, тоже залитой оранжевым. Мы уверены, что эти радиокнопки помогут вашему сайту выглядеть веселее и радостнее!

Давай попробуем прямо сейчас!

Возьми
Демо


Как Avada Commerce ранжирует список примеров радиокнопок CSS

Эти более 40 примеров переключателей CSS для CSS ранжируются на основе следующих критериев:

  • Рейтинги в примерах CSS
  • Рейтинг CSS в поисковых системах
  • Цены и характеристики
  • Репутация поставщика css
  • Показатели социальных сетей, такие как Facebook, Twitter и Google +
  • Обзоры и оценки Avada Commerce

Топ 40+ примеров радио-кнопок CSS

Особая благодарность всем поставщикам, которые предоставили 40 лучших примеров радио-кнопок CSS.

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

Ваш адрес email не будет опубликован.