Стилизация чекбоксов и радиокнопок на чистом CSS

Стилизация чекбоксов и радиокнопок на чистом CSS одна из тех вещей, которая делает Ваш сайт поистине индивидуальным. Но тут многие сталкиваются с проблемами. В этой статье мы научимся делать наши checkbox и radiobutton просто очень крутыми.

Сразу спешу сказать, что данный код позаимствован у Dimox, ссылку на оригинал ищите внизу статьи. В своей статье он максимально создал то, за что мы любим все веб-программирование, это когда такие вещи, которые всегда реализовывали только с помощью JavaScript, сегодня можно сделать на чистом CSS. Итак, приступим. Да, совсем забыл сказать, в оригинальной статье пишут и про совместимость со старыми браузерами. Но на сегодняшний момент я не вижу в этом смысла. И считаю, что мы будем сразу идти в ногу со временем.

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

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

1. Кроме, собственно, самого тега элемента, который мы хотим красиво оформить (<input type="checkbox"> или <input type="radio">), понадобится тег <label>, благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
2. Тег <input> должен находиться до тега <label> (в этом случае состояние элемента формы переключается с помощью атрибута for), либо он должен находиться внутри тега <label> (в этом случае атрибут for не нужен, но понадобится тег-обертка для текста), но данный вариант мы не будем рассматривать в этой статье. Мы считаем, что работать с for самый оптимальный вариант.

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

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

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

<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">Я переключаю чекбокс</label>

<input type="radio" class="radio" id="radio" />
<label for="radio">А я переключаю радиокнопку</label>

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

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 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.

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