Создание переключателя типа radio в CSS3 без применения JavaScript

Создание переключателя типа  radio в CSS3 без применения JavaScript

От автора: вы часто используете переключатели-слайдеры в качестве модной альтернативы чекбоксам. Сегодня мы создадим один из них с помощью простого CSS3 и HTML.

Замечательный переключатель будет создан без единой строчки на JavaScript, мы используем исключительно возможности CSS3. Итак, приступим…

Детали учебника

Тема: CSS3

Сложность: Средняя

Примерное время выполнения: 30 минут

скачать исходникидемо

Шаг 1: Начните с разметки

Создайте новый документ HTML и добавьте тэг span с классом toggle-bg. Это будет фоновая область переключателя.

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
 
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
 
    <!—Не забудьте метатэг Viewport http://enva.to/A79s3G -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
    <!-- CSS -->
    <link rel="stylesheet" href="your_stylesheet.css">
 
</head>
<body>
 
    <span class="toggle-bg"></span>
 
</body>
</html>

Шаг 2: Семантика и функциональность

Чтобы переключатель стал функционировать, мы применим несколько невидимых input-ов типа radio. Для них необходима всего пара требований:

У них должны быть разные значения

У них должно быть одинаковое имя

В качестве значений я буду применять вкл/on и выкл/off и имя toggle, но в зависимости от применения их можно менять. Например, может быть, вы станете переключать между да/yes и нет/no.

Добавьте input-ы в ранее созданный span. Ваш код должен выглядеть так:

<span class="toggle-bg">
    <input type="radio" name="toggle" value="off">
    <input type="radio" name="toggle" value="on"> 
</span>

В зависимости от вашего случая может понадобиться поместить все это внутри формы.

Шаг 3: Тумблер

Маленькая окружность, которая сама по себе будет тумблером-переключателем – это просто span, стили которому мы назначим позже. Назначьте span-у класс switch и вставьте его после input-ов.

Вот ваша окончательная разметка HTML:

<span class="toggle-bg">
    <input type="radio" name="toggle" value="off">
    <input type="radio" name="toggle" value="on"> 
    <span class="switch"></span>
</span>

Шаг 4: Назначьте стили фону

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

.toggle-bg{
    background: #222; /* Вам понадобится видеть область с тумблером, но не стесняйтесь изменить цвет */
    display: block; /* ...Чтобы можно было установить высоту и ширину */
    float: left; /* ...Чтобы он не занимал всю ширину страницы */
    height: 7px; /* Если хотите, можно это попозже изменить */
    position: relative; /* Требуется, чтобы тумблер мог передвигаться */
    width: 26px; /* Это тоже можно позже изменить */
}

Шаг 5: Невидимые input-ы

Input-ы нужно позиционировать абсолютно, а затем слегка сдвинуть, чтобы они правильно подходили. Затем мы переключим их непрозрачность opacity на 0.

.toggle-bg input{
    height: 28px;
    left: 0;
    margin: 0; /* Сбросьте поля и отступ */
    opacity: 0; /* Невидим! */
    padding: 0;
    position: absolute;
    top: -10px; /* Сдвиньте по вертикали */
    width: 36px;
    z-index: 2; /* Нам нужно, чтобы вход input находился сверху span.switch, которому мы назначим z-index в 1 */
}

Шаг 6: Тумблер

Тумблер должен быть квадратным, чтобы можно было позже закруглить его в идеальную окружность с помощью border-radius. Ему нужно относительное позиционирование, чтобы его можно было передвигать, а так как нам нужно назначить ему высоту (height) и ширину (width), он будет элементом уровня block, смещенным влево (float:left).

.switch{
    background: #ccc;
    display: block;
    float: left;
    height: 14px;
    left: -1px; /* Это – начальная точка. При добавлении border radius немного виден фон, если использовать left: 0;, поэтому лучше всего применить -1px.*/
    position: relative;
    top: -4px; /* ...Чтобы отцентрировать его по вертикали */
    width: 14px;
    z-index: 1; /* Помните, он должен быть под невидимыми input-ами */
}

Шаг 7: Хаки CSS!

CSS3 добавил новый общий комбинатор сиблингов (элементов одного уровня), селектор, применяющий tilde (~) для отбора элементов, разделяющих один и тот же родительский элемент. Порядок, в котором они появляются в CSS (до или после tilde), отражает тот порядок, в котором они появляются в DOM.

У нас также имеется доступ к новому псевдоклассу :checked. Он даст нам возможность в отдельности выбрать проверяемый radio input (в настоящее время невидимый).

Во-первых, мы применим эти селекторы для перезапуска исходного положения тумблера.

.toggle-bg input:checked~.switch{ left: -1px; } /* Исходная позиция тумблера */

Далее мы передадим браузеру окончательную позицию переключателя.

.toggle-bg input~:checked~.switch{ left: 13px; } /*окончательная относительная позиция переключателя */

Наконец, мы поставим :checked input за непроверенный input и тумблер так, чтобы можно было щелкнуть мышью на второй input.

.toggle-bg input:checked{ z-index: 0; }

К данному моменту все должно смотреться так:

Шаг 8: Созданное до сих пор

Вот полный CSS:

.toggle-bg{
    background: #222; /* Вам понадобится видеть область с тумблером, но не стесняйтесь изменить цвет */
    display: block; /* ...Чтобы можно было установить высоту и ширину */
    float: left; /* ...Чтобы он не занимал всю ширину страницы */
    height: 7px; /* Если хотите, можно это попозже изменить */
    position: relative; /* Требуется, чтобы тумблер мог передвигаться */
    width: 26px; /* Это тоже можно позже изменить */
}
 
.toggle-bg input{
    height: 28px;
    left: 0;
    margin: 0; /* Сбросьте поля и отступ */
    opacity: 0; /* Невидим! */
    padding: 0;
    position: absolute;
    top: -10px; /* Сдвиньте по вертикали */
    width: 36px;
    z-index: 2; /* Нам нужно, чтобы вход input находился сверху span.switch, которому мы назначим z-index в 1 */
}
 
.switch{
    background: #ccc;
    display: block;
    float: left;
    height: 14px;
    left: -1px; /* Это – начальная точка. При добавлении border radius показывается немного фона, если использовать left: 0;, поэтому лучше всего применить -1px.*/
    position: relative;
    top: -4px; /* ...Чтобы отцентрировать его по вертикали */
    width: 14px;
    z-index: 1; /* Помните, он должен быть под невидимыми входами inputs */
}
 
.toggle-bg input:checked~.switch{ left: -1px; } /* Исходная позиция тумблера */
 
.toggle-bg input~:checked~.switch{ left: 13px; } /* окончательная относительная позиция переключателя */
 
.toggle-bg input:checked{ z-index: 0; }

Шаг 9: Border Radius’ы

У вас сейчас получился глуповатый квадратный слайдер, поэтому давайте округлим его! Мы добавим border-radius в 8px в span с классом toggle-bg и в span с классом switch.

border-radius: 8px;

Примечание: Так как далее следуют opacity и transition, я здесь ради учебника не пользуюсь никакими префиксами, но вам для совместимости со старыми браузерами они понадобятся.

Шаг 10: Переходы

Transition (переходы) следует добавить в span с классом switch. Не стесняйтесь подгонять установки. Left: — это единственная часть следующего перехода, которую нельзя менять.

transition: left .2s ease;

Шаг 11: Фон, тени, градиенты…

Теперь, когда вся функциональность уже готова, все можно подогнать под себя, как вам нравится. Можно добавить тень блока и градиент фона в span с классом toggle-bg или в тумблер. Так как он круглый, на нем самом будут лучше смотреться радиальные градиенты.

Вот мои настройки, но, пожалуйста, измените их так, чтобы они соответствовали вашему стилю и вашему проекту.
Назначьте body беловатый фон и поле, чтобы переключатель был не совсем в углу:

body{
    background: #f6f8f9;
    margin: 200px;
}

Добавьте в стили для .toggle-bg следующее:

background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
box-shadow: 0 1px 0 #fff, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;

Добавьте в стили для .switch следующее:

background: radial-gradient(ellipse at center, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;

Шаг 12: Переключатели iOS

Для стиля переключателя iOS, где тумблер того же размера, что его фон, смените в стиле для .switch следующее:

height: 30px;
top: 0;
width: 30px;

Измените окончательное положение переключателя на left 41 px:

.toggle-bg input~:checked~.switch{ left: 41px; }

Измените размеры input-ов и удалите сдвиг по вертикали, изменив в стилях для .toggle-bg input следующее:

height: 30px;
top: 0;
width: 70px;

Измените все border radius на 30px вместо 8px.

Подсказка: следите, чтобы значение border-radius было равно высоте (height) изменяемого элемента.

И, наконец, измените height и width элемента .toggle-bg, чтобы те подходил к измененным элементам:

height: 30px;
width: 70px;

Заключение

Поздравляю! Теперь вы умеете создавать переключатели без JavaScript’а с помощью небольшого количества классного нового CSS3. Вам, возможно, захочется изменить фоновые градиенты и, к счастью, в этом вам может помочь великолепный онлайн-инструмент; посмотрите бесплатный редактор градиентов Colorzilla. Аналогично работает и приложение к Mac под названием Gradient.

Браузерная поддержка

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

Все версии Chrome

Все версии Firefox

Internet Explorer 9+

Opera 9+

Safari 3+

А следующие браузеры поддерживают общий комбинатор сиблингов:

Все версии Chrome

Все версии Firefox

Internet Explorer 7+

Opera 9+

Safari 3+

jsFiddle

Я создал три jsFiddle’а, чтобы вы могли поэкспериментировать сами. Первый включает самый минимум CSS, который вам понадобится для работы слайдера-«ползунка» переключателя. Второй, более блестящий, включает все, начиная с первого, плюс несколько дополнительных стилей и переходов. Последний – это тот, который я называю «переключателем в стиле iOS», где, как в переключателях в iOS, высота тумблера равна высоте фона переключателя.

Так как все это CSS, можно создать довольно много вариаций. Вот несколько для начала:

Создайте вертикальный, а не горизонтальный переключатель (может быть, для эквалайзера?)

Примените изображение с угловым градиентом, как у фона тумблера, чтобы добиться более реалистичного металлического вида.

Внутрь большого переключателя добавьте метку label.

Используйте jQuery для того, чтобы изменить фон .toggle-bg, когда отмечается дочерний input. Или, даже лучше, выясните, возможно ли это с помощью одного лишь CSS.

Добавьте метку label к каждому input-у внутри переключателя iOS и избирательно показывайте и скрывайте метки label с помощью jQuery.

Примечание: при создании метки label для radio input переключателя вам понадобится JavaScript для отображения и скрытия неактивных меток input-ов, если хотите, чтобы можно было применять метку label как способ снятия отметки с input. Иначе будет возможно только отметить (а не снять отметку) input, нажав на метку label.

Надеюсь, этот учебник оказался вам полезен. Спасибо за прочтение!

Автор: Sebastian Sandqvist

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Admin

    Как сделать так, чтобы при включенном состоянии цвет фона был другой?

  2. Александр

    Поддерживаю комментарий выше. Просьба ответить.

    • Андрей Кудлай

      Добавьте нужному input’u класс и обращайтесь по этому классу. Например, input’u со значением on добавьте класс on.
      После этого добавьте нужный цвет для этого переключателя:
      .toggle-bg input.on:checked~.switch{background: green;}
      Если возникнут дополнительные вопросы — просьба задавать их на нашем форуме, там удобнее показать код.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree