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

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

1. Постепенно улучшает стандартные переключатели-флажки.
2. Не использует лишние теги и атрибуты HTML5.
3. Поддерживает возможность добавить подпись.
4. Использует только CSS без изображений или JavaScript.
5. Использует относительные единицы измерения, так что элементы управления могут менять размер и быть адаптивными.
6. Имеет анимацию переключения.
7. Отлично работает в мобильных браузерах.
8. Работает во всех браузерах, не теряя основные черты и функциональность в старых браузерах.

Демонстрация работы – Исходный код

HTML 

Нам потребуется тег input для переключателя-флажка и тег label для подписи:

<div>
	<input type="checkbox" id="switch1" name="switch1" class="switch" />
	<label for="switch1">first switch</label>
</div>

Тегу input присвоен класс switch (переключатель). Это сделано, чтобы у нас остались обычные переключатели-флажки на случай, если они нам понадобятся.

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

HTML отобразится хорошо в большинстве браузеров с минимальной настройкой стилей, а пользователи браузеров Internet Explorer версий 6, 7 и 8 увидят следующее:

CSS

Перейдем к интересной части. Сначала мы спрячем поле для ввода, используя отрицательный отступ, что предпочтительней, чем свойство display:none, которое нередко отключает сам переключатель на мобильных устройствах:

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

Вы могли заметить использование селектора :empty в уроке “Создание изображений с адаптивной центровкой с использованием CSS3”. Он соответствует только элементам, у которых нет потомков, но так как он не поддерживается браузерами Internet Explorer версии 8 и ниже, то в этих браузерах не будут применяться стили.

После этого мы зададим стили соседней с переключателем-флажком подписи:

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, которое образует пространство для нашего переключателя, и line-height, которое определяет его высоту.

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

• Оба элемента абсолютно спозиционированны на левом краю подписи.
• Белому переключателю задан меньший размер и левый внешний отступ, чтобы расположить его в нужном месте по отношению к фону.
• Свойство border-radius и функция inset свойства box-shadow применены, чтобы придать глубину.
• Задан переход для анимации.

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;
}

Демонстрация работы – Исходный код

Переключатели весьма удобны. Вы можете использовать код, как пожелаете.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Знакомство с псевдоклассом CSS3 :target
• Создание логотипа Volkswagen с использованием CSS3 
• Применение режима наложения CSS3