Стилизуем чекбокс под Switch button с помощью css3

работающий switch button

В современном дизайне интерфейсов появилась тенденция использовать switch button вместо чекбоксов. Это красиво, модно и молодёжно. Сегодня мы будем стилизовать стандартный html чекбокс без потери функциональности и надстроек в виде javascript.

Разметка

Сам элемент checkbox не стилизуется, поэтому будем скрывать его и использовать дополнительные элементы. Так как мы не будем использовать javascript, то единственный вариант — стилизовать label.

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

Иными словами, наш чекбокс будет снаружи и перед label. Чтобы при нажатии на такой label чекбокс был отмечен, нужно будет связать label с помощью параметра "for", где прописывается id fчекбокса.

Выглядеть это будет так:

  <input id="myCheckbox0" type="checkbox">
  <label for="myCheckbox0"></label>

Так же, чтобы не прописывать классы для обоих элементов и для большей атомарности и целостности, будем использовать обёртку для этих двух элементов в виде span, которому и назначим основной класс.

HTML будет следующим:

  <span class="switch">
    <input id="myCheckbox0" type="checkbox">
    <label for="myCheckbox0"></label>
  </span>

Вот так будет с надписью:

  <span class="switch">
    <input id="myCheckbox0" type="checkbox">
    <label for="myCheckbox0">Выключить свет</label>
  </span>

изображение с этим блоком

Стили

Сначала скрываем чекбокс.

  .switch input[type=checkbox] {
    display: none;
  }

Работаем с label. Чтобы оставить текст видимым, сам label оставим почти без изменений, а использовать будем псевдоэлементы :before и :after. Позиционировать псевдоэлементы будем абсолютно, поэтому у label прописываем относительное расположение.

  .switch label {
    position: relative;
  }

Cделаем основной фоновый блок switch. Его роль будет играть label:before:

  .switch label:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 1.5em;
    width: 3em;
    box-sizing: border-box;
    margin: 0;

    /* цвет фона отключенного switch */
    background-color: lightgray;
    border-radius: 2em;
    border-width: .1em;
    border-style: solid;

    /* цвет рамок фона отключенного switch */
    border-color: lightgray; 
  }

  /* стиль фонового блока во включенном состоянии */
  .switch > input[type=checkbox]:checked + label:before{
    background-color: #03cea4;
    border-color: #03cea4
  }

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

  .switch label {
    position: relative; 

    /* это ширина label:before + небольшой отступ */
    padding-left: 3.5em;
  }

Получился вот такой вид:

переключающийся фоновый блок и текст лейбла

Теперь займёмся ползунком. Эта роль, как говорилось ранее, достанется блоку label:after.

  .switch > label:after { /* ползунок switch */
    content: "";
    position: absolute;
    display: block;
    /* высота :before - 2x(толщина обводки :before) */
    height: 1.3em;
    /* так как ползунок круглый, копируем height */ 
    width: 1.3em; 

    top: .1em;
    left: .1em;

    transition: all .2s ease-out; /* анимация перемещения ползунка */

    background-color: #fff;
    border-radius: 2em;
    box-sizing: border-box;
  }

  /* ползунок во включенном состоянии */
  .switch > input[type=checkbox]:checked + label:after {
      /* это число вычисляется по следующей формуле 
      x - y - z
      где:
      x ширина label:before (3em)
      y это ширина label:after (1.3em)
      z это ширина обводки label:before (.1em)

      3em - 1.3em - .1em = 1.6em
      */
      left: 1.6em;
  }

В итоге получается вот такой красивый switch button

готовый switch button

blog comments powered by Disqus
π