Радиокнопки html – Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров

Leave a Comment / Html / By /

Переключатель в форме HTML: radio

Переключатель в форме HTML: radio

Тег <input> с типом radio представляет собой поле-переключатель.

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

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

value.

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

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

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

<form action="/order">
    Выберите цвет футболки:
    <br>
    <label>
        <input type="radio" name="color" value="red">
        Красная
    </label>
    <br>
    <label>
        <input type="radio" name="color" value="blue" checked>
        Синяя
    </label>
    <br>
    <label>
        <input type="radio" name="color" value="green">
        Зелёная
    </label>
</form>

Результат:

Радиобаттон

Это всё о радиобаттоне. В следующем уроке поговорим о раскрывающемся списке для формы.

loader

Переключатели | Учебные курсы | WebReference

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

<input type="radio">

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

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатели</title>
 </head>
 <body>
  <form>
   <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 же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.

Перейти к заданиям

Стильный CSS переключатель без JavaScript / Habr

Здесь я покажу, как сделать переключатель на основе input-а на чистом CSS.

Демо
Все файлы

Для начала, надо сказать, что у input типом checkbox есть такая особенность:
если он выбран (галочка стоит), то элементу присваивается новый атрибут checked.
На этом эффекте и будет построен наш элемент.

Для начала, опишем сам инпут и обертку

<div>
	<input type="checkbox">
	<label for="sw"></label>
	<div></div>
</div>

В качестве ползунка будем использовать элемент label, так как он жестко привязывается по ID к конкретному инпуту. То есть нажал на label — считай, кликнул и поставил галочку в input.

Див с классом bg — это просто задний фон.

Опишем основные стили

.switcher {
	width: 124px;
	height: 49px;
	cursor: pointer;
	position: relative;
}
.switcher * {
	transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
}
.switcher .sw_btn {
	background: url('btn.png') 0% 0% no-repeat;
	width: 49px;
	height: 49px;
	display: block;
	cursor: pointer;
	z-index: 1;
	position: relative;
}
.switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; }
.switcher input.switcher-value { display: none; }
.switcher .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

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

На фон ставим картинку с выключенного переключателя (‘bg-off.png):

Так же установим свойство transition для плавности переключений.

А теперь — самое интересное 

.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; }
.switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }

Эти две строчки и переключают =)

Первая строка означает, что внешний отступ станет 68px у элемента с классом sw_btn,
который следует сразу за ВКЛЮЧЕННЫМ инпутом (об этом нам сообщает :checked).
А вторая, что надо сменить фон для элемента с классом .bg, следующего за элементом с классом sw_btn,
который идет сразу за ВКЛЮЧЕННЫМ инпутом.

Для выключенного инпута эти 2 свойства не работают.

Весь код
.switcher {
	width: 124px;
	height: 49px;
	cursor: pointer;
	position: relative;
}

.switcher * {
	transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
}

.switcher .sw_btn {
	background: url('btn.png') 0% 0% no-repeat;
	width: 49px;
	height: 49px;
	display: block;
	cursor: pointer;
	z-index: 1;
	position: relative;
}

.switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; }
.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; }
.switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }
.switcher input.switcher-value { display: none; }
.switcher .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

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

Как изменить фон у радиокнопки на CSS

Вы здесь: Главная — CSS — CSS Основы — Как изменить фон у радиокнопки на CSS

Как изменить фон у радиокнопки на CSS

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

Привожу HTML-код:

<input type="radio" name="name" />
<label for="r_1">Описание радиокнопки</label>
<input type="radio" name="name" />
<label for="r_2">Описание радиокнопки</label>

Отмечу важную вещь, что обязательно должен быть атрибут id у радиокнопки, плюс for на этот

id у тега label. Без этого ничего работать не будет.

И CSS-код:

.r_button {
display: none;
}

.r_button + label {
background: url("radio.png") no-repeat scroll 0 0;
cursor: pointer;
padding-left: 25px;
}

.r_button:checked + label {
background: url("radio_active.png") no-repeat scroll 0 0;
}

Сразу скажу, что «+» означает, что стиль должен быть применён к label, следующему после .r_button.

Теперь поясню, как это работает. Мы скрываем вообще радиокнопку, то есть она не показывается. Зато у label мы ставим поле слева, плюс слева ставим фон неактивной радиокнопки. Однако, мы с Вами поставили for у label. Следовательно, по клику на метке, у нас радиокнопка включается. Следовательно, срабатывает селектор «.r_button:checked + label«, который меняет у нас фон label

.

Как только идёт переключение на другую кнопку, сразу возвращаемся к неактивному фону.

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

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

  • Как изменить фон у радиокнопки на CSS Создано 13.03.2013 04:34:00
  • Как изменить фон у радиокнопки на 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]

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

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