Стильный CSS переключатель без JavaScript

Здесь я покажу, как сделать переключатель на основе input-а на чистом CSS.


Демо
Все файлы


Для начала, надо сказать, что у input типом checkbox есть такая особенность:
если он выбран (галочка стоит), то элементу присваивается новый атрибут checked.
На этом эффекте и будет построен наш элемент.

Для начала, опишем сам инпут и обертку

<div class="switcher">
	<input id="sw" type="checkbox" class="switcher-value">
	<label for="sw" class="sw_btn"></label>
	<div class="bg"></div>
</div>

В качестве ползунка будем использовать элемент label, так как он жестко привязывается по ID к конкретному инпуту. То есть нажал на label — считай, кликнул и поставил галочку в input.

Див с классом bg — это просто задний фон.

Опишем основные стили

.switcher {
	width: 124px;
	height: 49px;
	cursor: pointer;
	position: relative;
}
.switcher * {
	transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
}
.switcher .sw_btn {
	background: url('btn.png') 0% 0% no-repeat;
	width: 49px;
	height: 49px;
	display: block;
	cursor: pointer;
	z-index: 1;
	position: relative;
}
.switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; }
.switcher input.switcher-value { display: none; }
.switcher .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

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

На фон ставим картинку с выключенного переключателя ('bg-off.png):


Так же установим свойство transition для плавности переключений.

А теперь — самое интересное

.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; }
.switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }

Эти две строчки и переключают =)

Первая строка означает, что внешний отступ станет 68px у элемента с классом sw_btn,
который следует сразу за ВКЛЮЧЕННЫМ инпутом (об этом нам сообщает :checked).
А вторая, что надо сменить фон для элемента с классом .bg, следующего за элементом с классом sw_btn,
который идет сразу за ВКЛЮЧЕННЫМ инпутом.
Для выключенного инпута эти 2 свойства не работают.

Весь код

.switcher {
	width: 124px;
	height: 49px;
	cursor: pointer;
	position: relative;
}

.switcher * {
	transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
}

.switcher .sw_btn {
	background: url('btn.png') 0% 0% no-repeat;
	width: 49px;
	height: 49px;
	display: block;
	cursor: pointer;
	z-index: 1;
	position: relative;
}

.switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; }
.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; }
.switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }
.switcher input.switcher-value { display: none; }
.switcher .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

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