Стилизация флажков

Для изменения стиля флажков и переключателей мы вообще прячем исходный элемент <input> с помощью значения none у свойства display, а нужный стиль применяем к элементу <label>, связанный с этим <input>. В примере 1 флажок сделан как цветной прямоугольник, внутри которого перемещается белый квадратик (рис. 1). Включенный флажок выглядит как прямоугольник синего цвета с квадратиком слева; выключенный флажок выглядит как прямоугольник серого цвета с квадратиком справа.

Вид флажка

Рис. 1. Вид флажка

Чтобы квадратик плавно перемещался из одного положения в другое, добавлено свойство transition, значением которого выступает время движения, в данном случае полсекунды.

Пример 1. Стилизация флажка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Флажок</title>
  <style>
   .switch input { display: none; /* Прячем исходный флажок */ }
   .switch label {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
    width: 60px; height: 30px; /* Размеры прямоугольника */
    background: #9E9E9E; /* Серый цвет фона */
    transition: 0.5s; /* Время смены цвета фона */
   }
   .switch label::before {
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    background: #fff; /* Цвет фона квадратика */
    width: 20px; height: 20px; /* Размеры квадратика */
    left: 35px; top: 5px; /* Положение квадратика */
    transition: 0.5s; /* Время движения квадратика */
   } 
   .switch input:checked + label {
    background: #1976D2; /* Синий цвет фона */
   }
   .switch input:checked + label::before {
    left: 5px; /* Квадратик слева */
   }
  </style>
 </head>
 <body>
  <div class="switch">
   <input type="checkbox" id="switch">
   <label for="switch"></label>
  </div>
 </body>
</html>

Сам квадратик выводится с помощью псевдоэлемента ::before, который добавляется к селектору label. Это позволяет легко стилизовать элемент, к примеру, сделать его круглым, добавив лишь свойство border-radius.