prowebber.cc - Тут есть все для настоящих вебмастеров

Провеббер » Всё для uCoz » uCoz хаки » Новый вид CheckBox'ов

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?

Обращайся к нам в ЛС группы Вконтакте.

Новый вид CheckBox'ов

Автор: Mp3Live 2018-5-27 Всё для uCoz / uCoz хаки

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

Скачать бесплатно Новый вид CheckBox'ов.

Новый вид input type="checkbox" выполнен на чистом CSS3 и довольно прост в установке
Ну меньше слов, ближе к делу.

Установка:
Добавить этот код туда, где должен быть checkbox

Или этот код, если хотите чтобы были обозначения "on" и "off"

Ну и собственно CSS стили:

.checkbox {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px;}
  .checkbox[disabled="disabled"] + .checkbox-label::before,
  .checkbox[disabled] + .checkbox-label::before {cursor: not-allowed;}
  .checkbox[disabled="disabled"] + .checkbox-label::after,
  .checkbox[disabled] + .checkbox-label::after {opacity: .4; cursor: not-allowed;}
  .checkbox[disabled="disabled"] + .checkbox-label span,
  .checkbox[disabled] + .checkbox-label span {opacity: .4 !important;}

  .checkbox-label {position: relative; padding: 0 0 0 60px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
  .checkbox-label::before, .checkbox-label::after {content: ''; position: absolute; box-shadow: 0 0 1px 1px rgba(0,0,0,.15);}
  .checkbox-label::before {top: -4px; left: 0; width: 40px; height: 20px; border-radius: 3px; background: #CDD1DA;}
  .checkbox-label::after {top: -2px; left: 2px; width: 16px; height: 16px; border-radius: 2px; background: #FFF;}
  .checkbox:checked + .checkbox-label::before {background: #07f;}
  .checkbox:checked + .checkbox-label::after {left: 22px;}

  .checkbox-label span {pointer-events: none; position: absolute; top: -1px; font-size: 12px;}
  .checkbox-label span.off {left: 22px; color: #333;}
  .checkbox-label span.on {left: 5px; color: #fff; opacity: 0;}
  .checkbox:checked + .checkbox-label span.off {opacity: 0;}
  .checkbox:checked + .checkbox-label span.on {opacity: 1;}

  .checkbox-label::before, .checkbox-label::after, .checkbox-label span {transition: .2s;}

Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных

-6

Просмотры: 1 912 :: Комментарии (0) :: :: Нужна помощь? Задайте вопрос на форуме ::

Теги: ucoz

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Архив новостей