[вёрстка] Как при помощи CSS сделать оформление для флажков (checkboxes) и переключателей (radiobuttons)

Итак, сегодня мы рассмотрим, как делается оформление для чекбоксов и переключателей.


Простейший чекбокс создаётся так:

<input type="checkbox" id="check1">

Флажок, созданный при помощи такого тега, рисуется в соответствии с оформлением вашей операционной системы, и контроля над его оформлением мы не имеем:

Теперь добавим к флажку метку (label). Метка — это связанный с флажком элемент, при нажатии на который флажок срабатывает точно так же, как если бы мы нажали на сам флажок.

<input type="checkbox" id="check2">
<label for="check2">Очень важный флажок</label>

Результат:

Очень важный флажок

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

Как нам без скриптов менять внешний вид метки в зависимости от состояния флажка? В этом нам поможет псевдо-класс :checked и комбинатор +. Селектор input[type="checkbox"] + label означает «метка, которая расположена после флажка», а селектор input[type="checkbox"]:checked + label означает «метка, которая расположена после нажатого флажка».

Вот небольшой пример:

Реактор 1
Реактор 2

Исходные коды для этого примера можно посмотреть здесь: http://codepen.io/anon/pen/ymCrD

Для переключателей всё делается аналогично. Пример с переключателями: http://codepen.io/anon/pen/zrcDf.