Переключатели на CSS3

Такие мобильные-интерфейсы, как переключатели, разбросаны по всему Интернету и используются повсеместно, но мне захотелось их улучшить и рассказать вам как они работают.

В частности, мне нужно было решение, которое:

не использовало лишние HTML-теги и атрибуты
использовало только CSS без изображений или JavaScript
использовало относительные единицы, чтобы элементы управления могли изменять размер
использовало анимацию
идеально работало в мобильных и в старых браузерах

HTML код

Нам потребуется переключатель input и метка label:

<div>
    <input type="checkbox" id="switch1" name="switch1" class="switch" />
    <label for="switch1">первый переключатель</label>
</div>

Тегу input назначен класс “switch”. Таким образом, мы сможем вернуть нормальные чекбоксы, если они нам еще когда-нибудь понадобятся.

HTML-пуритане будут в ужасе, когда увидят обертку из тега div, но она необходима только, если вам потребуется два или более тумблеров - вы не можете иметь более одного переключателя (или ярлыка) в одном и том же родительском контейнере. Кроме того, вам в любом случае потребуется обертка из div чтобы отделить элементы формы друг от друга.

HTML код будет отрендерен во всех браузерах. Например, пользователи IE8 увидят вот что:

CSS код

Начнем с интересного. Во-первых, мы спрячем в поле ввода с использованием отрицательного отступа - это может быть предпочтительнее чем display:none, которым часто скрывают содержимое на мобильных устройствах:

input.switch:empty
{
	margin-left: -999px;
}

Обратите внимание на псевдокласс :empty, который представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста или пробелов Он не поддерживается IE8 и ниже, поэтому старые браузеры слили с таким псевдоклассом проигнорируют.

Next, we’ll style the sibling labels of the input checkbox:

input.switch:empty ~ label
{
	position: relative;
	float: left;
	line-height: 1.6em;
	text-indent: 4em;
	margin: 0.2em 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

Основные свойства, на которые стоит обратить внимание: position:relative, text-indent which provides room for our switch, и line-height, которая определяет его высоту..

Переключатель создается с использованием псевдоэлементов :before и :after для цветного фона и белой кнопки соответственно:

оба элемента позиционируются абсолютно по левому краю метки
белая кнопка уменьшена в размере и выровнена по левому краю относительно фона
свойства border-radius и box-shadow добавлены чтобы придать некую глубину
свойство transition добавлено для анимации.

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: ' ';
	width: 3.6em;
	background-color: #c33;
	border-radius: 0.3em;
	box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
	-webkit-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
}

input.switch:empty ~ label:after
{
	width: 1.4em;
	top: 0.1em;
	bottom: 0.1em;
	margin-left: 0.1em;
	background-color: #fff;
	border-radius: 0.15em;
	box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

Наконец, когда флажок установлен, мы перемещаем переключатель к правому краю и изменяем цвет фона:

input.switch:checked ~ label:before
{
	background-color: #393;
}

input.switch:checked ~ label:after
{
	margin-left: 2em;
}