Содержание

CSS стилизация checkbox и radio – 2 варианта

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Стилизация radio на CSS

Вы здесь: Главная — CSS — CSS3 — Стилизация radio на CSS

Стилизация radio на CSS

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

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

HTML код

Атрибут for у тега label устанавливает связь с input через id, в том случае если, input не вложен в label. Значения у for и id, должны быть одинаковыми. В нашем примере, у первой связки –

honda, а у второй renault. Когда пользователь должен выбрать только один вариант, следует прописать обоим инпутам, атрибут name с одинаковым значением (car). Атрибут type указывает, что инпут надо отобразить, как radio кнопку (круглым).

Обернем первую связку input+label в div с классом radio, то же самое сделаем для второй связки. Присвоим так же классы input и label, для их дальнейшей стилизации.

<div>
    <input name="car" type="radio">
    <label for="honda">Honda</label>
</div>
<div>
    <input name="car" type="radio">
    <label for="renault">Renault</label>
</div>

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

Стилизация radio на CSS.

Скажем спасибо браузеру и погрузимся в CSS код для стилизации radio кнопок.

CSS-код

Вложенные теги input+label, позиционируем относительно родителя – div с классом radio.

.radio {
    position: relative;
    margin-bottom: 1rem;
}

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

.radio_input {
    -webkit-appearance: none;/* Chrome */
    -moz-appearance: none;/* Firefox */
    appearance: none;/* убираем стандартные кружочки */
    position: absolute;
}

Стилизуем текст внутри тега label.

.radio_label {
    padding-left: 25px;/* отступ слева */
    font-size: 1rem;
    color: #444;
    cursor: pointer; /* курсор рука */
}

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

Стилизуем псевдоэлемент before

.radio_label:before {
    content: "";
    display: block; /* не в строку */
    width: 16px; /* ширина блока */
    height: 16px;/* высота блока */
    border: 1px solid #ccc;/* рамка */
    background-color: #fff; /* цвет фона */
    border-radius: 50%;/* получаем круг */
    position: absolute;/* расположен точно в родителе */
    top: 0; /* расстояние от верха родителя */
    left: 0;/* расстояние слева от родителя */
    z-index: 1; /* на нижнем слое */
    transition: border .1s linear;/* плавный переход для border */
}

Стилизуем псевдоэлемент after

.radio_label:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: #49d120;
    border-radius: 50%;
    opacity: 0; /* полностью прозрачный */
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;/* на верхнем слое */
    transition: opacity .1s linear; /* плавный переход для opacity */
}

Нам, нужно менять вид кружка, только при отмеченном состоянии (checked). Когда пользователь кликает в поле input, рамка у before меняет свой цвет.

.radio_input:checked + .radio_label:before {
    border-color: #319612;
}

А у after, прозрачный фон, становится непрозрачным, кружок окрашивается в зеленый цвет.

.radio_input:checked + .radio_label:after {
    opacity: 1;
}

Таким образом, в неотмеченном состоянии, поле input – белое. А в отмеченном состоянии – зелёное. Мы получили стилизованные radio кнопки на чистом CSS.

Демонстрация примера

  • Стилизация radio на CSS. Создано 24.05.2019 10:19:43
  • Стилизация radio на CSS. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Еще раз о визуализации input типа checkbox и radio. Для тех, кто забыл как / Хабр
Тема старая и уже, как выяснилось, подзабытая.

Недавно у меня была короткая работа по разработке ТЗ на модернизацию давно существующего проекта. И, в частности дело касалось стилизации пресловутых <input type=»checkbox»>. Выяснилось, что исполнитель, программист «на все руки» даже не понял, что я ему на словах объяснял как это сделать. Пришлось делать примеры и, как результат, появился этот текст.

Напомню, что сейчас checkbox и radiobox разные сайты изображают по-разному. Бывает, что не отмеченный input сразу и не разглядишь – такой он «дизайнерский красивый», а у последних версий Chrome выбранные checkbox стали гнусного цвета циан.

Итак, ситуация


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

Маркетологи и рекламщики тоже его используют. Что эта система делает – неважно, на чем написано – неважно.

А важно, что на сайте этого продукта есть много страниц с формами, на которых много input checkbox и radio.

Жалобы сотрудников


Директор: На большом экране плохо видно и незаметны «крыжики».
Главбух: На моем компе «крыжики» выглядят так, у сотрудниц иначе, дома тоже не так, а на планшете совсем иначе.
Маркетолог: А можно, так что бы некоторые не выбранные позиции были красными, а другие выбранные были зелеными?
И т.д., и т.п.

Итак, задача


  1. Минимальными затратами и минимальными изменениями исправить внешний вид checkbox и radiobox.
  2. Сделать стилизацию checkbox и radiobox для разных юзеров. Важно: это закрытый сайт, там «всё свои», «красоты» не нужны, а нужна эффективность восприятия.

Что нельзя


1. Серверную часть трогать нельзя.
2. Файлы javascript трогать нельзя, свой javascript вставлять нельзя.
3. Файлы css трогать нельзя.

А что можно


1. Править html шаблоны.
2. Создать файл стилей для всех юзеров.
4. Создать файл стилей для конкретного юзера или группы юзеров.
А что сделали можно сразу посмотреть на codepen.io, но лучше почитать дальше.

Предварительное изучение показало


1. Почти все имеют поле name, а которые не имеют, то у них есть id.
2. Все имеют поле name, некоторые имеют id.
3. Соответственно, в css к checkbox можно обращаться как по id, так и по name. К radio – или по id, или по номеру потомка у родителя.

Фрагменты исходного кода:

/* вариант 1 */
<tag><input type="checkbox"> Некий текст</tag>

/* вариант 2 */
<tag><input type="checkbox"> Некий текст<br>
<input type="checkbox"> Некий текст</tag>

/* вариант 3 */
...<label><input type="checkbox"> Некий текст</label>...

/* вариант 4 */
<td><input type="checkbox"></td>
<td><label for="idxxx">Некий текст</label></td>

Так исправим код:
/* вариант 1 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label></tag>

/* вариант 2 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label><br>...</tag>

/* вариант 3 */
...<label><input type="checkbox"><s></s><span>Некий текст</span></label>...

/* вариант 4 */
<td><label><input type="checkbox"><s></s></label></td>
<td><label for="idxxx">Некий текст</label></td>

Всё тоже самое и для , класс у LABEL тот же.

Что конкретно сделали?


  1. Каждый input (корме варианта 3) обернули тэгом LABEL с нашим классом. Варианту 3 просто добавили класс.
  2. Сразу после input вставили пустой тэг S. Так как сам input будет не видим, то это тэг будет визуализировать это input.
  3. Сопроводительный текст обернули тэгом SPAN (кроме варианта 4). Этот тэг понадобиться, когда будем решать вопрос выравнивания визуального input относительно этого текста.
  4. Варианту 4 добавили еще класс, что бы не осуществлять это выравнивание, раз сопроводительный текст стоит в другой ячейки таблицы. Строго говоря, надо было бы сделать на оборот – вариантам 1-3 добавить класс, отвечающий за выравнивание. Но, вариантов 1-3 гораздо больше, чем 4-го и что бы не раздувать html сделано так.

Риторические вопросы и риторические же ответы 1. Зачем тэг S? Ну, не нравится S – можно использовать любой другой строчный элемент. Просто он должен быть, его можно стилизовать в зависимости от состояния предшествующего input.

2. Почему тэги S и SPAN без классов? Ну, зачем раздувать html? Тем более, что не очевидно, что одна из конструкций ниже будет «работать» медленнее другой.

  .new-input > S { }
  .new-input > .new-input-S {}

3. Как вы догадались, мне не нравятся идеи БЭМ, тем более идея «раздувать» html файл обилием упоминаний разных классов. В реальном проекте мы использовали только два класса – mni и mnio. :-))

Некоторые предварительные рассуждения и настройки css касательно box-sizing:border-box, нормализации LABEL, селекторов «A + B», «A ~ B» и «[attr]», псевдоклассов :checked, :disabled и ::before. Кто не уверен, что знает или хочет освежить знания смотрит под катом. Предварительные рассуждения 1. Напомню, что в «старом» css (box-sizing:content-box) свойства width и height задают только ширину и высоту содержимого, а padding и border добавляются к этим значениям. box-sizing:border-box меняет схему так, что padding и border включаются в width и height.

2. Проверка показала, что в нашем случае используется старая модель, а менять «настройки» страниц запрещено. Не «наши» LABEL это простые строчные элементы, в них только текст. Поэтому стилизуем ВСЕ LABEL.

LABEL {
    box-sizing:border-box; cursor:pointer; user-select:none;
}
LABEL *,
LABEL *::before,
LABEL *::after {
    box-sizing:inherit;
}

Т.е., ставим box-sizing:border-box для тэга LABEL, всем его потомкам. Заодно ставим курсор и запрещаем выделение текст (что бы не мешало клику).

3. Комбинация селекторов «A + B» означает, что стили будут применяться только к селектору B, если он следует сразу ПОСЛЕ селектора A, т.е. только для первого B. С другой стороны, «A ~ B» означает, что ко всем селекторам B после селектора A, т.е. для первого и последующих.
Естественно, всё в пределах одного «родителя».

Как это будем использовать?

<label><input type="checkbox"><s></s><span>Некий текст</span></label>
<label><input type="radio"><s></s><span>Некий текст</span></label>
/* 1 */
.new-input > INPUT + S {}
.new-input > INPUT ~ SPAN {}

/* 2 */
.new-input > INPUT:not(:checked) + S {}
.new-input > INPUT:not(:checked) ~ SPAN {}

/* 3 */
.new-input > INPUT:checked + S {}
.new-input > INPUT:checked ~ SPAN {}

/* 4 */
.new-input > INPUT:disabled + S {}
.new-input > INPUT:disabled ~ SPAN {}

/* 5 */
.new-input > INPUT[type="radio"] + S {}

Первая группа – общие стили для тэгов S и SPAN.
Вторая группа – стили только когда INPUT НЕ выбран.
Третья – стили только когда INPUT выбран.
Четвертая – когда INPUT заблокирован.

И, наконец, пятая группа – общие стили для тэга S ТОЛЬКО, если он стоит после input radio.
Таким образом, можно изменять стили тэгов S и SPAN в зависимости от состояния input.

4. Поскольку у нас тэг S будет изображать из себя input, то самому input поставим display:none, его не будет видно, а тэг LABEL будет его переключать, а тэг S будет соответственно меняться. Почему не используем html свойство hidden у input? Потому, что на некоторых браузерах hidden у input «работает» не совсем верно, плюс не будем перегружать html файл.


Итак, начинаем визуализацию input


Пример N 1. Самый простой – используем алфавитные символы
html код тот же, а css будет такой:
/* s1 */
.new-input > INPUT + S::before {
  content: "c";
}
/* s2 */
.new-input > INPUT:checked + S::before {
  content: "V";
}
/* s3 */
.new-input > INPUT[type="radio"] + S::before {
  content: "r";
}
/* s4 */
.new-input > INPUT[type="radio"]:checked + S::before {
  content: "X";
}
/* s5 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s6 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}
/* s7 */
.new-input > S::before {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  color: #fafafa;
  background-color: #37474f;
}
/* s8 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}

Тэг S буде визуализировать input. Но мы «разделим» его по функционалу: сам тэг S будет отвечать за размещение в LABEL и выравнивание относительно следующего SPAN.

А псевдоэлемент S::before разместится внутри тэга S и будет изображать из себя input.

Строка s1 определяет, какой символ будет помещен в S::before когда input не выбран. В принципе надо было бы написать «.new-input > INPUT:not(:checked) + S::before», но некоторые браузеры (например, IE), подобную конструкцию могут и не исполнить.
Строка s2 определяет символ, когда input выбран.
Строки s3 и s4 делают то же для input radio.
Строка s5 описывает, что будет если input заблокирован – в данном случае тэг S будет наполовину прозрачным.
Строка s6 определяет выравнивание, в данном случае дает отбивку слева и справа (только в этом примере). Плюс, убирает штатное перечеркивание.
Строка s7 делает квадратик, s8 превращает его в кружок для input radio.

Пример N 1 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.

Чуток подробнее про display: inline-block, font-size, line-height Конченая высота строки текста определяется на основе заданных font-size, line-height. При единичном line-height – высота будет по font-size, при числовом line-height – высота будет по их произведению или, при указании единиц измерения для line-height – высоту определит максимальное значение. В примере указан line-height:1.25, поэтому и у S::before указано width:1.25em.

Для S::before указано display: inline-block – в этом случае S::before «внутри» себя будет блоком (можно указать ширину, высоту, рамки и пр.), а «снаружи» он останется строчным элементом. В дальнейшем об этом будет подробнее.

Вопрос:

Может можно использовать специальные символы? Типа вот этих:
□ ■ ▢ ▣ ○ ● ◎◉
Задать им нужный размер и всё. Нет?

Ответ:

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

Пример N 2. «Рисуем» элементы input средствами css

html код тот же, а css будет такой:

/* s1 */
.new-input > S::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  border-radius: 20%;
}
/* s2 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}
/* s3 */
.new-input > INPUT:checked + S::before {
  background-color: currentColor;
}
/* s4 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s5 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}

Строка s1 определяет S::before для визуализации input. Это будет inline-block, ширина и высота которого установлена в 0.75em, что примерно равно высоте прописной буквы и зависит от font-size родителя. Задана тонкая рамка текущим цветом, внутренняя отбивка, небольшое скругление углов. И – самое важное! – установлено свойство background-clip:content-box. Это очень интересное свойство – если будет установлен background-color, то он закрасит только контентную часть и не затронет отбивку (padding). Что нам и надо.

Строка s2 для input типа radio делает S::before круглым.
Строка s3 для отмеченного input устанавливает для S::before background-color текущим цветом. Т.е., «рисует» внутри квадратик или кружок.
Строка s4 отрабатывает блокировку input, строка s5 дает отбивки слева и справа.

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

  1. Всё очень просто. Работает на всех браузерах. Даже у IE10 (в эмуляции у 11-го).
  2. Можно раскрашивать по своему усмотрению.
  3. Раз S::before это inline-block, то он сидит на попе базовой линии ровно и никуда с нее не слезает. Если он по высоте будет больше текста, то просто увеличит высоту строки и останется на базовой линии.
  4. Раз визуализация input находится внутри тэга S, то его можно легко позиционировать и выравнивать.
  5. Размеры S::before в em дают возможность задавать его размер относительно размера текста подписи. Можно, к примеру, поставить предельные значения высоты и ширины.

Недостатки этого метода

В основном в использовании размеров в em. Дело в том, что может возникнуть ситуация когда ширина и высота при расчете (из em в px) будет иметь дробное значение. На обычных компьютерах с обычным экраном округление может произойти не корректно. Например, размеры 12.8px на 12.8px у той же Мозилы могут стать как 13px на 12px. Тогда надо ставить фиксированные размеры. Хотя на современных мониторах и видеокартах, ноутбуках, на планшетах и смартфонах этого не происходит из-за того, что точка (пиксель) браузера состоит из нескольких пикселей экрана.

Пример N 2 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.
Итак, первую задачу – визуализацию input – выполнили. Переходим к избранной «раскраске».

Раскрашиваем input


html для примера:
<label><input name="chb1" type="checkbox" ...><s></s><span>Некий текст</span></label>
<label><input type="radio" ...><s></s><span>Некий текст</span></label>

К input типа checkbox будем обращаться по name, к radio по id.

Всё красим в синий

/* только input */
.new-input > INPUT[name="chb1"] + S,
.new-input > INPUT#rb1 + S {
  color: #0091ea;
}
/* только text */
.new-input > INPUT[name="chb1"] ~ SPAN,
.new-input > INPUT#rb1 ~ SPAN {
  color: #0091ea;
}
/* или всё */
.new-input > INPUT[name="chb1"] ~ *,
.new-input > INPUT#rb1 ~ * {
  color: #0091ea;
}

Помним о специфичности в css, эти стили будут более специфичны, чем базовые и сработают обязательно. Чем они отличаются от описанных выше? Тем, что применяются только к избранным input – к тем, что имеет указанное значение name и id.

Тут всё хорошо кроме того, что не выбранные input будут не очень хорошо глядеться – тонкая синяя рамка мало заметна.

Красим в зеленый, когда input выбран

/* только input */
.new-input > INPUT[name="chb1"]:checked + S,
.new-input > INPUT#rb1:checked + S {
  color: #00c853;
}
/* только text */
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}
/* или всё */
.new-input > INPUT[name="chb1"]:checked ~ *,
.new-input > INPUT#rb1:checked ~ * {
  color: #00c853;
}

Первый вариант, на мой взгляд, не очень хорош – зеленым будут и рамка, и внутренний квадратик/кружок. Можно раскрасить только его.
/* только input и только внутри */
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}

Красим в красный, когда input НЕ выбран
/* только input */
.new-input > INPUT[name="chb1"]:not(:checked) + S,
.new-input > INPUT#rb1:not(:checked) + S {
  color: #d50000;
}
/* только text */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
}
/* или всё */
.new-input > INPUT[name="chb1"]:not(:checked) ~ *,
.new-input > INPUT#rb1:not(:checked) ~ * {
  color: #d50000;
}

Логика понятна? Можно и дальше делать более сложные конструкции.

Например, при не выбранном input текст должен быть красным и жирным, а при выбранном внутренний элемент input и текст должен быть зеленым. Элементарно!

/* текст, когда нет выбора */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
/* внутренний элемент input, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}
/* текст, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}

А, к примеру, надо обработать целую группу input (10-15 штук). Что бы не писать кучу строк можно найти их общего родителя (.parent_element) и сократить условие.
.parent_element > .new-input > INPUT:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
.parent_element > .new-input > INPUT:checked + S::before {
  background-color: #00c853;
}
.parent_element > .new-input > INPUT:checked ~ SPAN {
  color: #00c853;
}

Всё можно посмотреть в финальном примере на codepen.io

Вот, вроде как, и всё. Осталось только «почесать родимые пятна» перфекциониста – проблемы выравнивания.

Выравнивание визуального input и сопроводительного текста


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

1. Свойство font-size не определяет размер букв, а только размер знакоместа. Есть базовая линия (baseline), по которой расположены «нормальные» буквы. У «ненормальных» – g ц – нижние элементы «свисают» ниже её. Есть линия капители (cap height) – это верхняя граница «нормальной» прописной (заглавной) буквы. У «ненормальных» – Ё Й – верхние элементы «вылезают» выше её. Иными словами, размер прописной буквы это расстояние от базовой линии до капители, а знакоместо это чуть больше сверху и снизу. Обычно в «нормальных» шрифтах высота капители это 75% от высоты знакоместо. К примеру, font-size:16px, а размер буквы Н у шрифта Arial будет 12px. Но, бывают «специалисты» у шрифтов которых всё не так.

2. Свойство line-height определяет высоту строки. Если его вычисленное значение больше, чем указано в font-size, то браузер разместит текст так, что бы нормальная прописная буква была по середине высоты строки. Есть нюансы, но тут они не важны.

3. Соответственно, в нашем случае тэги S и SPAN должны иметь одинаковые значения font-size и line-height желательно заданные где-то выше у родителей. В нашем случае в примерах font-size:16px и line-height:1.25. Поэтому в примере N1 у S::before ширина указана 1.25em, а высота у него определяется автоматически. А в примере N2 (и финальный пример) – у S::before ширина и высота 0.75em, что бы был по высоте с прописную букву. Задав другое значение font-size ничего менять не надо. Естественно, эту величину надо подогнать под конкретный шрифт.

4. Если перед текстом стоит какая-то квадратная или круглая «штучка», то любой дизайнер скажет, что она должна быть по высоте с прописную букву. А отбивка между ними должна быть в определенных процентах от размера шрифта. Если высота меньше высоты буквы, то она должна быть визуально значительно меньше, но не меньше 50%. Если больше, то тоже визуально значительно больше, но не больше 150%. А вот чуть-чуть, на пару пикселей больше/меньше – это ужас-ужас! Ну, и расположена эта штучка должна быть на базовой линии или по середине без всяких там чуть-чуть.

Зачем я это упомянул? А затем, что перфекционисту глаза режет, когда input криво стоит рядом с текстом — или прилипает, или далеко, или чуть меньше, или чуть больше. Мы так делать не должны!


Что будет, если сопроводительный текст в SPAN будет выведен в две или три строки? Очевидно, что он «залезет» под input. Это не красиво, надо исправить.

Один древний метод такой: тэгу S делаем float:left, а тэгу SPAN display:block и overflow:hidden.

Получится колонка текста. Подразумевается, что у кого-то из них будет соответствующий margin, что даст отбивку между ними. Ну, ещё добавляется геморрой с прекращением float после SPAN. Мы пойдем современным путем – применим flexbox. Он тут совершенно к месту.

.new-input {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.new-input > S {
  margin-right: 4px;
  flex: 0 0 auto;
}
.new-input > SPAN {
  flex: 0 1 auto;
}

В этом случае тэг LABEL (который .new-input) будет flex, S и SPAN будут блоками, разместятся вверху LABEL. Текст в SPAN в случае необходимости будет в несколько строк. Вот из-за этого визуальный input описали в S::before. Независимо от высоты SPAN S::before будет расположен на одной базовой линии с первой строкой SPAN. Как вариант можно было указать align-items:center – тогда при однострочном SPAN визуальный input был бы вверху, а при двух строках – посередине, а при трех – у второй строки. В финальном примере можно переключать расположение input.

Вот и всё


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

Пример N 1 – просто демонстрация взаимодействия изменения input и соседнего элемента.

Пример N 2 – визуализация input средствами css, как основа решения.

Финальный пример – всё описанное вместе.

Про конкретную реализацию


Там были обширные формы, где блоки полей возможные для правки конкретным пользователям выделялись слабым фоном, а остальным input имели свойство disabled и служили только для информации. Поэтому стиль «.new-input > INPUT:disabled + S::before» не применяли.

UPD


В ответ на комментарии Пример N 3.
Там работает поддержка клавиш и фокуса для скрытого input.
Красивые чекбоксы и радиокнопки на CSS3 без JavaScript / Хабр
Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.

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

Для начала сделаем простой checkbox:

<input type="checkbox" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

Теперь необходимо спрятать чекбокс и использовать спрайты для отображения отмеченного чекбокса/радиокнопки:

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

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

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

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


Псевдоклассы, в частности используемый :checked, отлично работают в большинстве браузеров, за исключением Internet Explorer 9 (и ниже) и Safari в iOS ниже 6-ой версии. Вот так наша форма отображается в IE:

Пост написан по мотивам урока на tutplus.com Quick Tip: Easy CSS3 Checkboxes and Radio Buttons.

Простая кастомизация Checkbox и Radio / Хабр

Вместо вступления

Всем доброго времени суток!

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

К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.

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

Поехали!

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

Основная идея строится на нативном «умении» HTML тега label устанавливать связь с определенным элементом формы. Собственно и все, дальше только код.
Разметка

<ul>                
    <li>
        <input id=»cfirst» type=»checkbox» name=»first» checked hidden />
        <label for=»cfirst»>Checked checkbox</label>
    </li>
    <li>
        <input id=»csecond» type=»checkbox» name=»second» hidden />
        <label for=»csecond»>Unchecked checkbox</label>
    </li>
    <li>
        <input id=»cthird» type=»checkbox» name=»third» hidden disabled />
        <label for=»cthird»>Disabled checkbox</label>
    </li>
    <li>
        <input id=»clast» type=»checkbox» name=»last» checked hidden disabled />
        <label for=»clast»>Disabled checked checkbox</label>
    </li>
</ul>
<ul>                
    <li>
        <input id=»rfirst» type=»radio» name=»radio» checked hidden />
        <label for=»rfirst»>Checked radio</label>
    </li>
    <li>
        <input id=»rsecond» type=»radio» name=»radio» hidden />
        <label for=»rsecond»>Unchecked radio</label>
    </li>
    <li>
        <input id=»rthird» type=»radio» name=»radio» hidden disabled />
        <label for=»rthird»>Disabled radio</label>
    </li>
</ul>
 

Совершенно нативная разметка. Использование label вместе с input прям как из учебников. Важным моментом является только то, что нужно указывать id для каждого input и for для label, чтобы связать их.

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


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

Оформление

input[type=»checkbox»],
input[type=»radio»] {
    display:none;            
}
input[type=»checkbox»] + label, 
input[type=»radio»] + label {
  font: 18px bold;
  color: #444;
  cursor: pointer;
}
input[type=»checkbox»] + label::before,
input[type=»radio»] + label::before {
    content: «»;
    display: inline-block;
    height: 18px;
    width: 18px;
    margin: 0 5px 0 0;
    background-image: url(uniformjs.com/images/sprite.png);
    background-repeat: no-repeat;
}
input[type=»checkbox»] + label::before {
    background-position: -38px -260px;    
}
input[type=»radio»] + label::before {
    background-position: 0px -279px;
}
input[type=»checkbox»]:checked + label::before {
    background-position: -114px -260px;
}
input[type=»radio»]:checked + label::before {
    background-position: -108px -279px;
}
input[type=»checkbox»]:disabled + label::before {
    background-position: -152px -260px;
}
input[type=»checkbox»]:checked:disabled + label::before {
    background-position: -171px -260px;
}
input[type=»radio»]:disabled + label::before {
    background-position: -144px -279px;
}
input[type=»radio»]:checked:disabled + label::before {
    background-position: -162px -279px;
}​

Тут все так же максимально просто. Используем псевдо-элемент before для того, чтобы показывать наши «виртуальные контролы» и пользователь не заметил подмены. Части спрайта, меняем в зависимости от состояния input‘а.

В результате получаем что-то вроде:

Демо

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

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

UPD: Как было отмечено уважаемым SelenIT2 данный способ вероятно не будет работать в браузере Safari под платформу iOS из-за досадной ошибки в поддержке html спецификации (ссылка).

Делаем красивые кнопки выбора (стилизация 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

Переключатели | htmlbook.ru

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

<input type="radio" name="имя" атрибуты>

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей
Атрибут Описание
checked Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатели</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
    <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
    <p><input type="submit" value="Выбрать"></p>
  </form> 
 </body>
</html>

В результате получим следующее (рис. 1).

Рис. 1. Вид переключателей в браузере

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

77 радио кнопок CSS

Collection of HTML and CSS radio button code examples: custom, multiple and radio button group. Update of February 2019 collection. 11 new items.

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

  1. CSS-чекбоксы
  2. CSS тумблеры

Автор
  • Джон Кантнер
О коде

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

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

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

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

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

О коде

Neumorphic Radio

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

Отзывчивый: нет

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

Автор
  • Джон Кантнер
О коде

радиопереключение

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

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

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

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

Автор
  • Аарон Икер
О коде

2020 Toggles

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

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

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

О коде

Bulgy Radios

Еще одна чрезмерно сложная радио анимация.

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

Отзывчивый: нет

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

Автор
  • Дин Хидри
О коде

Card Theme Switcher

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

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

Отзывчивый: нет

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

Автор
  • Abubaker Saeed
О коде
Пользовательские радио кнопки

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

Отзывчивый: нет

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

Автор
  • Иван Гроздик
О коде

Pure CSS Радиокнопки (темные / светлые)

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

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

Зависимости: начальная загрузка.css, unicons.css

Автор
  • Брэндон Макконнелл
О коде

Готовься

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

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

Отзывчивый: нет

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

Автор
  • Андрей Шарапов
О коде

Анимированные кнопки SVG Radio

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

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

Отзывчивый: нет

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

Автор
  • Микаэль Айналем
О коде

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

Подсветка радиокнопки путешествует под землей.

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

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

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

Автор
  • Брэндон Макконнелл
О коде
Переключатель Dot-Slider

Pure CSS

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

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

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

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

Автор
  • Бенджамин Келер
О коде

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

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

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

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

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

О коде

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

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

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

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

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

Автор
  • Дронка Рауль
О коде

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

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

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

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

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

О коде

Радиовход

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

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

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

Автор
  • Андреас Шторм
О коде

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

MacOS Mojave темный режим и переключатели.

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

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

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

О коде

Выравнивание радио кнопки

хитрости CSS: используйте flex-grow для перехода.

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

Отзывчивый: нет

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

Автор
  • Андреас Шторм
О коде

Материал Дизайн Радио Кнопки

переключатели Pure CSS Material Design.

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

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

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

Автор
  • Тамино Мартиниус
О коде

Wobble Radio Buttons

Фрагмент пользовательского интерфейса

для переключателей в HTML, CSS и JS.

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

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

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

Demo image: Responsive Toggle Switch
О коде
Адаптивный тумблер

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

Demo image: Smile Toggle (HTML + CSS)
Автор
  • Кэмерон Фицвильям
О коде

Переключатель улыбок (HTML + CSS)

Переключатель с CSS с использованием : проверено ~ (имя класса) .

Demo image: Pure CSS-SVG Radio Selector Buttons
Автор
  • Nikki Pantony
О коде

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

Пример построен с использованием только CSS и SVG, JS не требуется.Вдохновленный Google Material Design.

Demo image: Slap Toggle
Автор
  • Ярив Фрунд
О коде

Slap Toggle

CSS шлепок.

Demo image: Input Radio
Автор
  • Андреас Шторм
О коде

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

Простой стиль ввода радио.

О коде

☑️ Transform Toggles, изменится ☑️

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

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

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

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

Demo image: Material Inspired Radio Groups
Автор
  • Бадди Рено
О коде

Материал Вдохновленные радиогруппы

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

Demo Image: Toggle Radio Intput
Автор
  • Андрей Верещак
  • 03.08.2017
Сделано с
  • HTML
  • CSS / SCSS
  • JavaScript (jQuery.js, bootstrap.js, slick.js)
О коде

Toggle Radio Intput

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

Demo Image: Custom Radio Buttons Survey
Автор
  • Тобиас Больоло
  • 07.07.2017
Сделано с
  • HTML
  • CSS
  • JavaScript (jQuery.js)
О коде

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

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

Demo Image: Styling radio buttons
Автор
  • Александра Репета
  • 30.06.2017
О коде

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

переключателей стилей Pure CSS.

Demo Image: Liquid Radio Button
Сделано с
  • HTML
  • CSS / SCSS
  • JavaScript (jQuery.js, TweenMax.js)
  • SVG
О коде
Жидкостная радиокнопка

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

Demo Image: Liquid Radio Button
Автор
  • Тамино Мартиниус
  • 02.06.2017
О коде
Жидкостная радиокнопка

Радиокнопка жидкостная с SVG.

Demo Image: Custom Radio Buttons
О коде
Пользовательские радио кнопки

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

Demo Image: Radio Button Circuit
О коде

Радиокнопка

Радиокнопочная схема с HTMl и CSS.

Demo Image: Jelly Radio Button Демо-изображение: радио-желе

Желе Радио Кнопка

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

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

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

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

Demo Image: Ripple Animation On Input Type Radio And Checkbox Демонстрационное изображение: Ripple Animation On Input Type Radio и флажок

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

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

Demo Image: CSS Radio Buttons Демо-изображение: CSS Radio Buttons

CSS-радио кнопки

Простая и элегантная кнопка-переключатель CSS.
Made by Tristan White
13 декабря 2016 г.

Demo Image: Radio Group Using Labels Демо-изображение: Radio Group с использованием ярлыков

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

Радиогруппа с использованием меток с HTML и CSS.
Made by Sam Keddy
5 декабря 2016 г.

Demo Image: Radio Button Big Square Демо-изображение: Radio Button Big Square

Радиокнопка Большой квадрат

Чистый CSS-переключатель большой квадрат.
Made by Gabriel Ferreira
12 ноября 2016 г.

Demo Image: Animated Checkbox And Radio Buttons Демо-изображение: анимированные флажки и радио кнопки

Анимированные флажки и радио кнопки

Анимированные CSS-галочки и радио-переключатели.
Made by Kolja Kutschera
12 октября 2016 г.

Demo Image: Radio Selects Демо-изображение: радио выбирает

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

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

Demo Image: Checkout Form Демо-изображение: Форма оформления заказа

Оформить заказ

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

Demo Image: SVG Splat Radio Buttons Демо-изображение: SVG Splat Radio Buttons

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

Переключатели HTML, CSS и SVG.
Made by Chris Gannon
18 июня 2016 г.

Demo Image: Radio Buttons Демо-изображение: радио кнопки

Радио кнопки

Откройте разные окна, нажав переключатели.
Made by Saumitra Bose
1 июня 2016 г.

Demo Image: CSS Only Input Radio Select Concept Демонстрационное изображение: Только для CSS Входное радио Выберите концепцию

Только для CSS Входное радио Выбор концепции

Тестирование некоторой концепции выбора входного радио с анимированным слайдом для определения, какой из них выбран.
Made by web-tiki
9 мая 2016 г.

Demo Image: Input & Radio-Button Демо-изображение: вход и радио-кнопка

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

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

Demo Image: Very Simple Radio Buttons Демо-изображение: очень простые радио кнопки

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

HTML и CSS просто очень простые переключатели.
Made by Pamela Dayne
17 апреля 2016 г.

Demo Image: Pure CSS Fancy Checkbox/Radio Демо-изображение: Pure CSS Fancy Checkbox / Radio

Pure CSS Fancy Checkbox / Радио

Fancy Checkbox / Радио кнопки с небольшим переходом, наслаждайтесь!
Made by Рауль Баррера
11 апреля 2016 г.

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

Google Точки Радио Кнопки

4 различных способа легко настроить переключатели.
Автор Victor Freire
5 марта 2016 г.

Demo Image: Animated Switch For Radio Buttons Демо-изображение: Анимированный переключатель для кнопок радио

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

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

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

Demo Image: Material Radio Button Демо-изображение: Материал Radio Button

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

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

Demo Image: Google Maps Radio Buttons CSS Only Демо-изображение: кнопки Google Maps Radio Только CSS

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

Радиокнопки, стилизованные под настоящие кнопки. Только CSS
Made by Elias Meire
7 декабря 2015 г.

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

Simple Toggle

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

Demo Image: Radio Button CSS Демо-изображение: радио-кнопка CSS

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

Простой стиль ввода радио. Sass это путь!
Made by Lorenzo D’Ianni
25 сентября 2015 г.

Demo Image: Fancy Radio Button Демо-изображение: необычная кнопка радио

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

Необычная радио-кнопка, которая выглядит как флажок.
Made by Stacy
17 сентября 2015 г.

Demo Image: Custom CSS3 Radio Button Демо-изображение: пользовательская кнопка-переключатель CSS3

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

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

Demo Image: CSS Ripple/Wave Checkbox And Radio Button Демонстрационное изображение: CSS Ripple / Wave Checkbox и Radio Button

CSS Пульсация / Волна Флажок и переключатель

Анимируйте проверку и снятие отметки, используя SASS и Bourbon.
Made by Matt Sisto
21 августа 2015 г.

Demo Image: Radio Button Input Scale Демонстрационное изображение: шкала радиокнопки

Радиокнопка ввода Шкала

Радио кнопки переосмыслены. Это основано на общих ответах опроса «никогда, иногда, часто, обычно всегда».”
Made by Caleb Duren
2 августа 2015 г.

Demo Image: Stylish Radio Buttons Демо-изображение: стильные радио кнопки

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

CSS только стильные радиокнопки.
Автор Simon Buisson
31 июля 2015 г.

Demo Image: Radio Button Styling Демо-изображение: стиль радио кнопки

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

Стили для кнопок HTML и CSS.
Made by Morten Olsen
16 июня 2015 г.

Demo Image: CSS Styling Radio Button Демонстрационное изображение: радио-кнопка CSS Styling

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

Трюки, придающие стиль радио-кнопке.
Made by Angela Velasquez
26 мая 2015 г.

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

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

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

Demo Image: Radio Input Демо-изображение: радио вход

Радиовход

Простой радиовход с использованием класса: checked psuedo.
Made by Håvard Brynjulfsen
15 апреля 2015 г.

Demo Image: Flat Radio Button Inputs Демонстрационное изображение: плоские радиокнопки

Плоские радиокнопки Входы

Стильные переключатели, которые по-прежнему допускают ввод с клавиатуры (по крайней мере, в Chrome).
Made by Kris Hedstrom
4 апреля 2015 г.

Demo Image: Radio Control Демо-изображение: Радиоуправление

Радиоуправление

Эта ручка используется в статье SitePoint — Элементы тематической формы с Sass.
Сделано в SitePoint
31 марта 2015 г.

Demo Image: Radio Buttons Демо-изображение: радио кнопки

Радио кнопки

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

Demo Image: Flat Radio - Yes/No Демо-изображение: Flat Radio — Да / Нет

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

На основе пера Нейта Уайли «Стилизованные радиокнопки».Аналогичная концепция, но с плоским дизайном. Поиграйте с переменными цвета ($ red, $ blue, $ green), чтобы настроить цвета кнопок.
Made by Matthew Blode
27 октября 2014 г.

Demo Image: Awesome Toggle Button Демонстрационное изображение: Awesome Toggle Button

Awesome Toggle Button

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

Demo Image: Radio Checked Style Демо-изображение: радио-стиль

Радио Проверено Стиль

Проверено радио стиль.Потрясающие.
Made by Volker Otto
30 сентября 2014 г.

Demo Image: 2 Elements 1 Styled Radio Демо-изображение: 2 Elements 1 Styled Radio

2 Elements 1 Styled Radio

переключатели с меткой в ​​чистом HTML / CSS стиле и анимации (дополнительные элементы не требуются).
Made by Tobias HarisonDenby
8 сентября 2014 г.

Demo Image: Balloon Radio Buttons Демо-изображение: воздушные шарики

Радиокнопки «Воздушный шар»

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

Demo Image: Custom Checkboxes/Radio Buttons Демо-изображение: пользовательские флажки / радио кнопки

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

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

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

Бодрые радио кнопки!

Радиокнопки с HTML и CSS.
Made by Joe Ringenberg
19 июня 2014 г.

Demo Image: Simple Radio Group Using CSS3 Демонстрационное изображение: Simple Radio Group с использованием CSS3

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

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

Demo Image: Radio Buttons Демо-изображение: радио кнопки

Радио кнопки

переключатели HTML и CSS.
Made by White Wolf Wizard
19 февраля 2014 г.

Demo Image: Cool Radio Buttons Демо-изображение: Cool Radio Buttons

Cool Radio Кнопки

переключатель HTML и CSS.
Made by Eric Rogg
20 ноября 2013 г.

,

HTML input type = «radio»

❮ HTML <вход> атрибут типа

Пример

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


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

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

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

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

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

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

Совет: Всегда добавляйте тег


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

Атрибут
type = «radio» да да да да да

Синтаксис


❮ HTML <вход> атрибут типа

,

html — Как изменить стиль радио и флажок ввода

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
.

Как выбрать радиокнопку в css?

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,

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

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