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

Пример переключателя CSS не требует написания много лишнего кода CSS. Переключатель на CSS можно разместить как в шаблоне так и в содержании сайта.

Оглавление:
  1. Переключатели CSS
  2. HTML
  3. CSS
  4. Переключатель для содержания

Переключатели CSS

Переключатель CSS состоит из кнопки (тумблер), по умолчанию переключатель выключен и горит красным цветом кроме второго переключателя. После включения переключатель перемещается и загорается зеленый цвет.






к меню ↑

HTML

HTML переключателя для трёх переключателей. Переключателей может больше или меньше. Если нужно больше переключателей, добавляем теги input и label и меняем id="switch3" и for="switch3" на большое число, например id="switch4" и т.д.

<form action="#" method="get">
<var>
  <input id="switch1" class="switch" name="switch1" type="checkbox" />
  <label for="switch1">первый переключатель</label>
</var>
<var>
  <input id="switch2" class="switch" checked="checked" name="switch2" type="checkbox" />
  <label for="switch2">второй переключатель</label>
</var>
<var>
  <input id="switch3" class="switch" name="switch3" type="checkbox" />
  <label for="switch3">третий переключатель</label>
</var></form>
к меню ↑

CSS

В CSS для переключателя применяются селекторы :empty, :before, :after, :checked в настоящее время все новые браузеры поддерживают их. Свойство transition применяется для плавного движения переключателя по горизонтали, и также поддерживается современными браузерами.

form
{
	margin: 40px 0;
}
var
{
	clear: both;
	margin: 0 50px;
}
input.switch:empty
{
	margin-left: -999px;
}
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;
}
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: 2.1em;
}
к меню ↑

Переключатель для содержания

Если нужно вставить переключатель в содержание сайта, набор свойств CSS нужно обвернуть в атрибут для стилей scoped внутри тега div.

<div>
<style scoped>
// CSS
</style>
<form action="#" method="get">
// HTML
</form>
</div>