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

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

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

В примере не используются скрипты, только чистый CSS.

Шаг 1. HTML-разметка

Для начала сделаем HTML-разметку. Она очень простая и состоит из тега input и label. Напоминаем о том, что label должен быть обязательно расположен после тега input.



Полю input мы дали класс check. Далее мы будем работать только с этим классом.

Шаг 2. Стили для чекбоксов

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

Указываем кликабельность лейбла (label):

.check + label {
  cursor: pointer;
}

Это нужно указывать для всех браузеров, не только для устаревших, что наш лейбл кликабелен.

.check + label {
  cursor: pointer;
}

Скрываем стандартный чекбокс:

.check:not(checked) {
  display: none;
}

Позиционирование псввдочекбокса относительно label

.check:not(checked) + label {
  position: relative;
  padding: 0px 0px 0px 60px;
}

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

Фон чекбокса в выключенном состоянии:

.check:not(checked) + label:before {
  content: "Выкл";
  position: absolute;
  width: 40px;
  height: 22px;
  background: #f3f3f3;
  border: 1px solid #c3c3c3;
  color: #434343;
  top: 0;
  left: 0;
  padding: 3px 0px 0px 30px;
}


Так он будет выглядеть в выключенном состоянии.

Переключатель в выключенном состоянии:

.check:not(checked) + label:after {
  content: "";
  position: absolute;
  background: #ffffff;
  border: 1px solid #c3c3c3;
  width: 23px;
  height: 25px;
  top: 0;
  left: 0; 
  transition: all .3s;
}

Здесь мы указываем стили для переключателя (белый квадрат). Также добавили анимацию, что он переключался плавно.

Фон чекбокса в включенном состоянии:

.check:checked + label:before {
  content: "Вкл";
  width: 40px;
  background: #ffeba0;
  padding: 3px 20px 0px 10px;
  border: 1px solid #ffcc00;
}

Стиль фона чекбокса, когда он находится в включенном состоянии.


Так он будет выглядеть в включенном состоянии.

Стили переключателя в включенном состоянии:

.check:checked + label:after {
  left: 47px;
  border: 1px solid #ffcc00;
}

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

Полный текст кода

.check + label {
  cursor: pointer;
}

.check:not(checked) {
  display: none;
}

.check:not(checked) + label {
  position: relative;
  padding: 0px 0px 0px 60px;
}

.check:not(checked) + label:before {
  content: "Выкл";
  position: absolute;
  width: 40px;
  height: 22px;
  background: #f3f3f3;
  border: 1px solid #c3c3c3;
  color: #434343;
  top: 0;
  left: 0;
  padding: 3px 0px 0px 30px;
}

.check:not(checked) + label:after {
  content: "";
  position: absolute;
  background: #ffffff;
  border: 1px solid #c3c3c3;
  width: 23px;
  height: 25px;
  top: 0;
  left: 0; 
  transition: all .3s;
}

.check:checked + label:before {
  content: "Вкл";
  width: 40px;
  background: #ffeba0;
  padding: 3px 20px 0px 10px;
  border: 1px solid #ffcc00;
}

.check:checked + label:after {
  left: 47px;
  border: 1px solid #ffcc00;
}

Финальный результат

На этом все. Наш чекбокс готов. Если вы все сделали правильно, то он должен выглядеть как на картинке:


Если что-то не работает, то скачайте исходники и посмотрите где у вас ошибки.

Автор урока: редакция REDSTAR
Урок для Вас подготовлен командой сайта red-star.pro.