CSS checkbox и стилизация

Иногда, когда мы смотрим на радиокнопки или input type checkbox, то у нас возникают неприятные ощущения. Кажется, что они выглядят ужасно. Но пока не посыпалась нецензурные слова, я попытаюсь избавить вас от этого чувства.

Сегодня мы будем работать только с кодом. Для начала сформируем его структуру:

//Radio
<label>
<input type="radio">
<span>I'm a radio button</span>
</label>
//Checkbox
<label>
<input type="checkbox">
<span>I'm a checkbox</span>
</label>

Если эта кнопка покажется вам некрасивой, не беспокойтесь. Так и должно быть, потому что все остальное мы сделаем при помощи CSS.

Первое что нужно сделать, это скрыть элемент, который генерирует саму некрасивую кнопку – тэг input. Мы все равно сможем нажимать ее, даже несмотря на то, что она скрыта. Как? Вложив input type checkbox в label.

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

Радиокнопка

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

label input[type="radio"] {
  display: none;
}
label input[type="radio"] ~ span {
  position: relative;
  display: inline-block;
  padding: 3px 0 3px 25px;
}
label input[type="radio"] ~ span:before {
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  background: #fff;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 50%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  transition: all 300ms ease-in-out;
}
label input[type="radio"]:checked ~ span:before {
  border: 5px solid #29d;
}

На данный момент наша радиокнопка будет выглядеть следующим образом:

Гораздо привлекательней, не так ли?

Чекбокс (флажок)

Давайте начнем с простого HTML input type checkbox. Сейчас я хочу превратить переключатель, который вы видите на скриншоте, в нечто подобное:

label.spin input[type="checkbox"] {
  display: none; /*hides ugly toggle*/
}
label.spin input[type="checkbox"] ~ span {
  position: relative;
  display: inline-block;
  padding: 3px 0 3px 25px; /*adds spacing on the left*/
}
/*create our new toggle*/
label.spin input[type="checkbox"] ~ span:before {
  content: "2713"; /*add a new check mark*/
  text-align: center;
  font-size: 13px;
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  background: #fff;
  color: #fff;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 50%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  transition: all 500ms ease-in-out;
}
/*if checked do this*/
label.spin input[type="checkbox"]:checked ~ span:before {
  transform: rotatez(360deg);
  background: #29d;
  border-color: #29d;
}

Действительно красивый переключатель!

Бонус!

Наверняка вы видели input type checkbox, в которых тумблер скользит слева направо при нажатии. Такого эффекта можно легко добиться при помощи CSS. Давайте попробуем.

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

label input[type="checkbox"] {   display: none; }

Затем добавьте немного пространства с левой стороны при помощи свойства padding. После этого задайте чекбоксу относительное позиционирование, так как нам нужно, чтобы он содержал в себе и все остальные элементы внутри span:

label input[type="checkbox"] ~ span {   position: relative;   display: inline-block;   padding: 3px 0 3px 35px; }

Перейдем к стилизации CSS input type checkbox при помощи псевдоэлементов :before и :after. Так сгенерированным CSS-кодом будет проще управлять:

label input[type="checkbox"] ~ span:before, label.slide input[type="checkbox"] ~ span:after {
content: "";
position: absolute;
display: block;
width: 18px;
height: 18px;
background: #fff;
margin-right: 5px;
border: 1px solid #ccc;
left: 0;
top: 0;
box-sizing: border-box;
transition: all 300ms ease-in-out;
}

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

Пришло время немного украсить эти псевдоэлементы. :after будет выступать в роли фона, а :before отвечать за переключение ползунка. Давайте отредактируем ширину элемента, чтобы он стал больше. Также не забудьте добавить inset shadow, чтобы он выглядел как бы вдавленным. Кроме этого не забываем про красный фон, который будет интуитивно указывать на “выключенный” режим:

label input[type="checkbox"] ~ span:before { 
width: 30px;
border-radius: 20px;
box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.4), inset 0 -2px 0 -1px rgba(255, 255, 255, 0.2); 
background: #F22613; 
}

Что касается :before, то нам нужно сделать так, чтобы элемент стал круглым, а также немного «приподнять» его при помощи эффекта box-shadow:

label.slide input[type="checkbox"] ~ span:after {
box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.5);
border-radius: 50%;
}

Во «включенном» режиме нам нужно сместить ползунок HTML input type checkbox в сторону, и изменить цвет фона с красного на оттенок голубого:

label.slide input[type="checkbox"]:checked ~ span:before {
background: #29d;
}
label.slide input[type="checkbox"]:checked ~ span:after {
left: 13px;
}

На этом все! Наши красивые чекбоксы и радиокнопки готовы!