Input radio css примеры. CSS: Делаем radio инпут в виде кнопок

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

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

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

submit - подобное значение атрибута type определяет input как кнопку, при нажатии которой будет прорабатываться определённый сценарий (что такое сценарий вы узнаете позже, изучив языки PHP и JavaScript). Кнопка используется для того, чтобы отправить данные из форм к обработчику, написанному, например, на вышеуказанных языках. Есть и другие, но указал самые популярные.

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

radio - Данное значение создает радиокнопку, то есть переключатель. Используется, как правило, для значений с небольшим количеством вариантов. Например, выбрать пол, интервал с возрастом и тп. выглядит следующим образом:

У атрибута type задано значение radio - это радиокнопка. В значение value записывается та фраза или слово, которое вы хотите получить, если кто-то выбрал определенную радиокнопку и отправил данные.

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

checkbox - это поле, которое работает так же как и радиокнопка. С разницей лишь в том, что можно выделить несколько чекбоксов в качестве вариантов ответа. Также как и с радиокнопкой, если к вопросу принадлежат несколько чекбоксов, то у них атрибут name должен быть соответственно одинаково заполнен. В value соответственно будет указано значение выбранного поля.

Особенности работы полей input

Как сделать так, чтобы у пользователя сразу был выбран ответ (чекбокс или радиокнопка)?
Для этого существует одиночный атрибут checked. Его нужно указать в конце тега input. Так как атрибут одиночный, то значений у него никаких нет. Надо лишь добавить его в элемент input. Например, как в записи ниже:

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

Я прочитал соглашение
Соответственно указываете в теге label, открывающем и закрывающем, сам чекбокс и нужные слова. И внимание! Даже если пользователь нажмёт на слово, то чекбокс всё равно будет выделен.

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

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

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

Поехали!

Разметка

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

Думаю все заметили использование атрибута 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 ,

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 ;
} ​

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

Часто бывает нужно сделать так, что бы какие-то html элементы имели нестандартный вид.

Раньше для этого мастерили много JavaScript кода, который делал нужные подмены. Теперь же можно на чистом CSS это все организовать. Причем работоспособность гарантированна во всех современных браузерах.
Для чего это нам может понадобиться? Вариантов применения масса от красивого меню до выбора необходимых опций у товаров для подсчета цены. Например берем аренда авто Харьков и для каждой машины делаем возможность выбрать, необходимые в аренде авто, опции. И красиво и пользователю удобно как со стационарного компьютера так и с мобильного устройства.

Итак, нам необходимо сделать отображение стандартных input radio в виде стилизированных кнопок.

Создаем небольшой файл стилей:

Radio_buttons { margin: 20px; font: 14px Tahoma; } .radio_buttons div { float: left; } .radio_buttons input { position: absolute; left: -9999px; } .radio_buttons label { display: block; margin: 0 0 0 -1px; padding: 8px 10px; border: 1px solid #BBBBBB; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, .12); cursor: pointer; } .radio_buttons input:checked + label { background: white; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2); } .radio_buttons div:first-child label { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .radio_buttons div:last-child label { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

А теперь все стили применим на html разметку:

Таким простым способом мы добились нужного эффекта.

Let"s add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a element represents preformatted text which is to be presented exactly as written in the HTML file.">

 block to output the form data into:

 

 
 

 
 Email
 
 Phone
 
 Mail
 
 

 Submit
 


Using radio inputs
We already covered the fundamentals of radio buttons above. Let"s now look at the other common radio-button-related features and techniques you may need to know about.
Selecting a radio button by default
To make a radio button selected by default, you simply include checked attribute, as shown in this revised version of the previous example:

 

 
Please select your preferred contact method:
 

 
 Email
 
 Phone
 
 Mail
 
 

 Submit
 

In this case, the first radio button is now selected by default.
Note
: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.
Providing a bigger hit area for your radio buttons
In the above examples, you may have noticed that you can select a radio button by clicking on its associated element represents a caption for an item in a user interface.">  element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.
Beyond accessibility, this is another good reason to properly set up  elements on your forms.
Validation
Radio buttons don"t participate in constraint validation; they have no real value to be constrained.
Styling radio inputs
The following example shows a slightly more thorough version of the example we"ve seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:

 

 

 
Please select your preferred contact method:
 

 
 Email
 
 Phone
 
 Mail
 
 

 Submit
 
 

There"s not much new to note here except for the addition of element is used to group several controls as well as labels () within a web form."> 
 and element represents a caption for the content of its parent 
."> 
 elements, which help to group the functionality nicely and in a semantic way.

The CSS involved is a bit more significant:
Html {
 font-family: sans-serif;
}
div:first-of-type {
 display: flex;
 align-items: flex-start;
 margin-bottom: 5px;
}
label {
 margin-right: 15px;
 line-height: 32px;
}
input {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border-radius: 50%;
 width: 16px;
 height: 16px;
 border: 2px solid #999;
 transition: 0.2s all linear;
 outline: none;
 margin-right: 5px;
 position: relative;
 top: 4px;
}
input:checked {
 border: 6px solid black;
}
button,
legend {
 color: white;
 background-color: black;
 padding: 5px 10px;
 border-radius: 0;
 border: 0;
 font-size: 14px;
}
button:hover,
button:focus {
 color: #999;
}
button:active {
 background-color: white;
 color: black;
 outline: 1px solid black;
}
Most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system"s native styles for those controls. By specifying appearance: none , you can remove the native styling altogether, and create your own styles for them. Here we"ve used a border along with border-radius and a transition to create a nice animating radio selection. Notice also how the ), checkbox (), or option ( in a ) element that is checked or toggled to an on state."> :checked pseudo-class is used to specify the styles for the radio button"s appearance when selected.

Compatibility note
: If you wish to use the appearance property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword none does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.
Notice that when clicking on a radio button, there"s a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you"d want in a real web application, but it definitely shows off the possibilities.
Specifications
Specification

 
Status

 


HTML Living Standard
 The definition of "" in that specification.

 
Living Standard


 



Chrome for Android

Edge Mobile

Firefox for Android

Opera for Android

Safari on iOS

Samsung Internet


 type="radio"
Chrome

 Full support

 Yes
Edge

 Full support

 Yes
Firefox

 Full support

 Yes
IE

 Full support

 Yes
Opera

 Full support

 Yes
Safari

 Full support

 Yes
WebView Android

 Full support

 Yes
Chrome Android

 Full support

 Yes
Edge Mobile

 Full support

 Yes
Firefox Android

 Full support

 4
Opera Android

 Full support

 Yes
Safari iOS

 Full support

 Yes
Samsung Internet Android

 ?

Legend
 
 Full support

 Full support 
 Compatibility unknown

 Compatibility unknown
See also
 element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.">  and the elements."> HTMLInputElement interface that implements it.
 
 or a 
 element."> RadioNodeList : the interface that describes a list of radio buttons

Последнее обновление: 08.04.2016
Флажок
Флажок представляет элемент, который может находиться в двух состояниях: отмеченном и неотмеченном. Флажок создается с помощью элемента input
с атрибутом type="checkbox"
:

 

 
 
 
 
 
 
Изучаемые технологии
 

 

 HTML5
 
 

 .NET
 
 

 Java
 
 

 Отправить
 
 
 

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

 

 
 
 
 
 
 

 
Укажите пол
 

 мужской
 
 

 женский
 
 
Выберите технологию
 

 HTML5
 
 

 .NET
 
 

 Java
 
 

 Отправить
 
 
 

Для создания радиокнопки надо указать атрибут type="radio" . И теперь другой атрибут name указывает не на имя элемента, а на имя
группы, к которой принадлежит элемент-радиокнопка. В данном случае у нас две группы радиокнопок: gender и tech . Из каждой группы
мы можем выбрать только один переключатель. Опять же чтобы отметить радиокнопку, у нее устанавливается атрибут checked:
Важное значение играет атрибут value , который при отправке формы позволяет серверу определить, какой именно переключатель был отмечен.