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

Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже ) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы.

Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.

Важные особенности

Чтобы всё получилось, важно учитывать следующее:

1. Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег , благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
2. Тег должен находиться до тега (в этом случае состояние элемента формы переключается с помощью атрибута for), либо он должен находиться внутри тега (в этом случае атрибут for не нужен, но понадобится тег-обертка для текста).

«Фокус» заключается в использовании псевдоселекторов:checked и:not . При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов:before и:after для тега или вышеупомянутого тега-обертки.

Стилизация для современных браузеров

Рассмотрим оба вариант расположения стилизуемого элемента формы. Какой из них наиболее удобен — решать вам. Суть от этого не меняется.

Теги чекбокса и радиокнопки находятся перед тегом

В HTML-коде это выглядит следующим образом:

Я переключаю чекбокс А я переключаю радиокнопку

Еще раз хочу заострить ваше внимание — тег обязательно должен быть расположен перед тегом . Если вы поменяете их местами, ничего работать не будет.

CSS-код для чекбокса будет таким:

Checkbox { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox + label { position: relative; padding: 0 0 0 60px; cursor: pointer; } .checkbox + label:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox + label:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox:checked + label:before { background: #9FD468; } .checkbox:checked + label:after { left: 26px; } .checkbox:focus + label:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки будет таким:

Radio { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio + label { position: relative; padding: 0 0 0 35px; cursor: pointer; } .radio + label:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio + label:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio:checked + label:after { opacity: 1; } .radio:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

С помощью свойств position , z-index и opacity для классов.checkbox и.radio мы визуально прячем оригинальные элементы, при этом они остаются на том же самом месте, где будут стилизованные элементы. А с помощью margin немного смещаем их, чтобы сообщение валидации HTML5 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.

Теги чекбокса и радиокнопки находятся внутри тега

HTML-код в данном случае будет следующим:

По аналогии с предыдущим вариантом — тег обязательно должен быть расположен перед тегами с классом.checkbox__text и.radio__text .

CSS-код для чекбокса будет таким:

Checkbox input { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox__text { position: relative; padding: 0 0 0 60px; cursor: pointer; } .checkbox__text:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox__text:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox input:checked + .checkbox__text:before { background: #9FD468; } .checkbox input:checked + .checkbox__text:after { left: 26px; } .checkbox input:focus + .checkbox__text:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки будет таким:

Radio input { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio__text { position: relative; padding: 0 0 0 35px; cursor: pointer; } .radio__text:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio__text:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio input:checked + .radio__text:after { opacity: 1; } .radio input:focus + .radio__text:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

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

Стилизация с учетом старых браузеров

CSS-код для чекбокса . В комментариях к коду я добавил пояснения касательно браузеров:

/* Cначала обозначаем стили для IE8 и более старых версий т.е. здесь мы немного облагораживаем стандартный чекбокс. */ .checkbox { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } /* Это для всех браузеров, кроме совсем старых, которые не поддерживают селекторы с плюсом. Показываем, что label кликабелен. */ .checkbox + label { cursor: pointer; } /* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше. Благодаря тому, что старые браузеры не поддерживают селекторы:not и:checked, в них все нижеследующие стили не сработают. В данном случае checked указывается без двоеточия впереди, почему-то это срабатывает именно так. */ .checkbox:not(checked) { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox:not(checked) + label { position: relative; padding: 0 0 0 60px; } .checkbox:not(checked) + label:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox:not(checked) + label:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox:checked + label:before { background: #9FD468; } .checkbox:checked + label:after { left: 26px; } .checkbox:focus + label:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки :

Radio { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } .radio + label { cursor: pointer; } .radio:not(checked) { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio:not(checked) + label { position: relative; padding: 0 0 0 35px; } .radio:not(checked) + label:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio:not(checked) + label:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio:checked + label:after { opacity: 1; } .radio:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

Примеры

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

Мы продолжаем тему прошлого урока и в нем мы рассмотрели процесс создания обычных полей для ввода текста . Сегодня, в продолжение, мы научимся создавать еще один элемент формы это радиокнопки. Такие кнопки используются, когда нужно указать один из вариантов ответа на выбор, например «да» или «нет», и не как не оба варианта. Давайте создадим такие радиокнопки, возьмем конечный результат прошлого урока и после полей input создадим новый абзац и напишем еще один тег и в нем укажем следующие атрибуты.

Первый - это тип поля type= "radio" - атрибут, задающий тип кнопки. Второй - это атрибут задающий имя нашей кнопке name= "time" . Это значение и будет послано нашему обработчику в момент, когда посетитель нажмет кнопку «отправить». То есть если эта радиокнопка будет активна, то именно это значение и будет отправлено обработчику value= "yes" . В итоге у нас получилась вот такая строка. Вставив в редактор эту строку, и обновив браузер, получим простую радиокнопку.

HTML

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

HTML

Теперь наша кнопка уже имеет вариант ответа (ее значение). Теперь создадим еще одну радиокнопку с противоположным ответом «нет». Делается это очень просто, копируем уже созданную кнопку и меняем в ней слово «да» на «нет» и в атрибуте value устанавливаем значение no . Важно знать тот факт, что имена у радиокнопок должны оставаться одинаковыми, так как это показывает браузеру, что эти две кнопке относятся одной группе и что они взаимоисключающие друг для друга.

HTML

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

Ну и теперь зададим сам вопрос для наших кнопок, перед нашими кнопками создаем еще один абзац с нашим вопросом.

HTML

Ну и теперь еще один интересней момент он может пригодится при использовании радиокнопок это автоматическая активация кнопки. Если сейчас обновить страницу, то у Вас не активна не одна кнопка. Изначально мы можем указать, какая кнопка будет активна, для этого используется специальный атрибут, добавив его к кнопке, она по умолчанию будет активирована. И этот атрибут называется checked , что в переводе с английского означает «отмеченный». Этот атрибут достаточно не обычный, ему не требуется указывать значение.

На этом с радиокнопками все. В суме двух уроков у нас получился вот такой код:

HTML

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

Input:checked + label:before { content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; }

Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.

Стилизуем чекбоксы

Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:

Input { display: none; }

Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента:before, просто добавим рамку:

Checkbox label:before { border-radius: 3px; }

Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ? ✓.

Input:checked + label:before { content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center; line-height: 15px; }

В итоге, вот что у нас должно получиться:

Итоги

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

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 , который при отправке формы позволяет серверу определить, какой именно переключатель был отмечен.