Стильные выключатели на чистом CSS

Разместил: Apocalypse
Опубликовано: 25 марта 2016

Отличный пример того, как стилизовать обычные переключатели (input type=«checkbox») при помощи CSS3 Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

sup { color: #AF5D6C; } .text-center { text-align: center; } /* Important switch stuff */ label { width: 34px; height: 14px; background: lightgray; display: inline-block; border-radius: 10px; position: relative; cursor: pointer; margin: 10px; } label:before, label:after { content: ""; display: inline-block; width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: -3px; left: 0; transition: all .2s; } label:after { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); } label:before { background: lightgray; transform: scale3d(0, 0, 1); } label:active:before { transform: scale3d(3, 3, 1); opacity: 0; } input[type=checkbox].switch { display: none; } input[type=checkbox].switch:checked + label { background: rgba(3, 155, 229, 0.5); } input[type=checkbox].switch:checked + label:before, input[type=checkbox].switch:checked + label:after { left: 14px; background: #039be5; } input[type=checkbox].switch:disabled + label { opacity: 0.4; cursor: not-allowed; } input[type=checkbox].switch.green { display: none; } input[type=checkbox].switch.green:checked + label { background: rgba(4, 196, 52, 0.5); } input[type=checkbox].switch.green:checked + label:before, input[type=checkbox].switch.green:checked + label:after { background: #04c434; } input[type=checkbox].switch.red { display: none; } input[type=checkbox].switch.red:checked + label { background: rgba(244, 67, 54, 0.5); } input[type=checkbox].switch.red:checked + label:before, input[type=checkbox].switch.red:checked + label:after { background: #f44336; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

sup { color: #AF5D6C; }   .text-center { text-align: center; }   /* Important switch stuff */ label { width: 34px; height: 14px; background: lightgray; display: inline-block; border-radius: 10px; position: relative; cursor: pointer; margin: 10px; } label:before, label:after { content: ""; display: inline-block; width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: -3px; left: 0; transition: all .2s; } label:after { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); } label:before { background: lightgray; transform: scale3d(0, 0, 1); } label:active:before { transform: scale3d(3, 3, 1); opacity: 0; }   input[type=checkbox].switch { display: none; } input[type=checkbox].switch:checked + label { background: rgba(3, 155, 229, 0.5); } input[type=checkbox].switch:checked + label:before, input[type=checkbox].switch:checked + label:after { left: 14px; background: #039be5; } input[type=checkbox].switch:disabled + label { opacity: 0.4; cursor: not-allowed; }   input[type=checkbox].switch.green { display: none; } input[type=checkbox].switch.green:checked + label { background: rgba(4, 196, 52, 0.5); } input[type=checkbox].switch.green:checked + label:before, input[type=checkbox].switch.green:checked + label:after { background: #04c434; }   input[type=checkbox].switch.red { display: none; } input[type=checkbox].switch.red:checked + label { background: rgba(244, 67, 54, 0.5); } input[type=checkbox].switch.red:checked + label:before, input[type=checkbox].switch.red:checked + label:after { background: #f44336; }

  2#: HTML код для использования:

<input type="checkbox" id="switch1" class='switch' checked/> <label for="switch1"></label> <input type="checkbox" id="switch2" class='switch red' checked/> <label for="switch2"></label> <input type="checkbox" id="switch3" class='switch green' checked/> <label for="switch3"></label> <input type="checkbox" id="switch4" class='switch green' disabled/> <label for="switch4"></label>

1 2 3 4 5 6 7 8 9 10 11

<input type="checkbox" id="switch1" class='switch' checked/> <label for="switch1"></label>   <input type="checkbox" id="switch2" class='switch red' checked/> <label for="switch2"></label>   <input type="checkbox" id="switch3" class='switch green' checked/> <label for="switch3"></label>   <input type="checkbox" id="switch4" class='switch green' disabled/> <label for="switch4"></label>

Автор публикации

не в сети 4 дня

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: CSS3ВыключательПереключательСтильные

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Анимированный загрузчик (Spinner) на CSS3
• Предыдущая публикация Weloveiconfonts - иконки из шрифтов на чистом CSS

Вам может также понравиться...

• Светлая анимированная страница 404 для uCoz

  Разместил: Apocalypse 18 февраля 2018

  - Apocalypse 18 февраля 2018 Last modified 19 февраля 2018

• Адаптивная форма обратной связи на CSS3 и SVG

  Разместил: Apocalypse 18 мая 2016

  - Apocalypse 18 мая 2016

• Красивые эффекты на кнопках при наведении с использованием CSS3 и SVG

  Разместил: Apocalypse 24 октября 2020

  - Apocalypse 24 октября 2020 Last modified 16 октября 2020

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии