Статьи

Как создать тумблер в CSS3

Ноябрь 10, 2018

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

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

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

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

Просмотрите демонстрационную страницу и код HTML / CSS …

HTML

Нам требуется поле inputlabel 

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

На input Это гарантирует, что мы можем сохранить обычные флажки, если они нам понадобятся.

Пуристы HTML будут в ужасе, увидев div Кроме того, вам, вероятно, понадобятся div

HTML будет хорошо отображаться в большинстве браузеров с минимальным стилем. Пользователи IE6, 7 и 8 увидят это:

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

CSS

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

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

Возможно, вы видели :emptyКак создать адаптивное центрированное изображение в CSS3» . Он соответствует только элементам, у которых нет дочерних элементов, но, поскольку он не поддерживается в IE8 и ниже, эти браузеры не будут пытаться применять стили.

Далее, мы будем стилизовать метки родственных элементов для флажка ввода: 

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

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

Сам тумблер создается с использованием псевдоэлементов :before:after

  • оба элемента абсолютно расположены на левом краю нашего лейбла
  • белый переключатель имеет меньший размер и имеет левое поле, чтобы выровнять его по фону
  • применяется рамка-радиус и вставка 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;
}

Просмотрите демонстрационную страницу и код HTML / CSS …

Всем нравится тумблер! Пожалуйста, используйте код, как вам нравится. Приветствуется ссылка на эту статью или твит «Эй, Крейг, это круто / ужасно» .

40
Share: