Input type radio css: — HTML: HyperText Markup Language — Вебджем.рф | Создание и продвижение сайтов

Содержание

тип ввода=радио – радиокнопка

ⓘ тип ввода=радио – радиокнопка # T

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

Допустимое содержимое #

пустой (пустой элемент)

Разрешенные атрибуты #

глобальные атрибуты & название & отключен & форма & тип★ & проверено & ценить и автофокус и требуется

ⓘ глобальные атрибуты: Любые атрибуты, разрешенные глобально.
ⓘ имя = строка #: Часть имени пары имя/значение, связанная с этим элемент для отправки формы.
radio.attrs.disabled»> ⓘ отключен = «отключен» или «» (пустая строка) или пустая #: Указывает, что элемент представляет отключенный контроль.
ⓘ форма = Идентификационная ссылка НОВЫЙ #: Значение я бы атрибут на форма с которым связать элемент.
тип = «радио» #: Указывает, что его вход элемент представляет выбор одного элемента из списка элементов.
ⓘ проверено = «проверено» или «» (пустая строка) или пусто #: Указывает, что элемент представляет выбранный контроль.
значение = строка #: Задает значение для вход элемент.
ⓘ автофокус = «автофокус» или «» (пустая строка) или пустая НОВЫЙ #: Указывает, что элемент представляет элемент управления, к которому UA предназначен для того, чтобы сосредоточить внимание, как только документ загружен.
ⓘ требуется = «обязательный» или «» (пустая строка) или пустая НОВЫЙ #: Указывает, что элемент является обязательной частью формы подчинение.

Дополнительные ограничения и предупреждения #

Ввод интерактивного элемента не должен появляются как потомки элемента a.
Ввод интерактивного элемента не должен отображаться как потомок элемента кнопки.

Любой элемент ввода, потомок элемента метки с атрибутом for должен иметь Значение идентификатора, которое соответствует этому атрибуту.
Атрибут списка элемента ввода должен ссылаться на элемент списка данных.
Ввод элемента с типом атрибута чье значение «кнопка» должно иметь непустое значение атрибута.
Атрибут usemap в элементе ввода устарел. Используйте элемент img вместо элемента ввода для карт изображений.
Атрибут align элемента ввода устарел. Вместо этого используйте CSS.

Отсутствие тега #

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

Разрешенные родительские элементы #

любой элемент, который может содержать элементы фразировки

Радиоселектор в пользовательском стиле. Учебник по созданию пользовательского стиля… | Б. Чен

Учебное пособие по созданию радиоселектора в пользовательском стиле.

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

Для фона: радиоселектор без стиля . Это будет выглядеть немного по-разному в зависимости от используемого вами браузера.

Встроенная радиокнопка браузера

Ниже показан тот же радиоселектор , стилизованный напрямую только с помощью CSS.

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

HTML-разметка

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

Обратите внимание, что в конце каждого переключателя есть пустой div

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

отображать.

CSS

Пункт маркированного списка отображается по умолчанию в неупорядоченном списке . Итак, вам нужно убедиться, что стиль списка: нет; установлен в вашем неупорядоченном списке .

 .radiogroup ul { 
  стиль списка  : нет; 
 }

Нам также нужно скрыть отображение встроенного в браузер переключателя. Для этого воспользуемся opacity: 0

 .control input { 
  position  : absolute; 
  непрозрачность  : 0; 
 }

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

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

Обратите внимание, что есть

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

Для внешней круглой границы используем . control-indicator с трюком border-radius: 50%

 .control-indicator { 
 position: absolute; 
 сверху: 14 пикселей; 
 слева: 10 пикселей; 
 высота: 30 пикселей; 
 ширина: 30 пикселей; 
 цвет фона: прозрачный; 
 граница: 6px сплошная #ffffff; 
  радиус границы: 50%;  
 }

Для внутреннего круга воспользуемся .control-indicator:after с тем же приемом border-radius:50%

 .control-indicator:after { 
 content: ''; 
 позиция: абсолютная; 
 дисплей: блок; 
 слева: 5 пикселей; 
 верх: 5 пикселей; 
 высота: 20 пикселей; 
 ширина: 20 пикселей; 
 
  радиус границы: 50%;  
 }

А вот и CSS для выбранного варианта. Обратите внимание, селектор CSS ~ используется для выбора .control-indicator , которому предшествует input:checked

 .control input:checked ~ .control-indicator { 
 border-color: #c0392b; 
 } 
 . control input:checked ~ .control-indicator:after { 
 background-color: #c0392b; 
 }

Теперь вы должны увидеть эффект, как показано ниже:

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

Селектор :hover используется для выбора элементов при наведении курсора на элемент. 9Селектор 0005 :focus используется для выбора элемента, находящегося в фокусе. Давайте стилизуем эффект наведения и фокусировки с эффектом перехода 0,3 с, ослабить на цвет , background-color

и border-color .

 .control span { 
 color: #ffffff; 
  переход: цвет 0,5 с;  
 }.control-indicator { 
 position: absolute; 
 сверху: 14 пикселей; 
 слева: 10 пикселей; 
 высота: 30 пикселей; 
 ширина: 30 пикселей; 
 цвет фона: прозрачный; 
 граница: 6px сплошная #ffffff; 
 радиус границы: 50%; 
  переход: цвет границы 0,5 с;  
 }.

Input type radio css: — HTML: HyperText Markup Language