Мы в твиттере Наша страничка на FaceBook! Сообщество вебмастеров в VK Мы в телеграме!

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

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

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

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

Установка:
Добавить этот код туда, где должен быть checkbox
<input type="checkbox" id="check-name" class="checkbox"/>



Или этот код, если хотите чтобы были обозначения "on" и "off"
<label for="check-name" class="checkbox-label"><span class="off">off</span><span class="on">on</span></label>



Ну и собственно 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;}




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


-1


Просмотры: 1245 :: Комментарии (0) :: :: Нужна помощь? Задайте вопрос на форуме ::
Теги: ucoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

:смиле: Социальная сеть
https://www.shoutout.ga


Plati-Market.Ru - Более 20 лет в мире цифрового контента и игр!

ПЕРЕЙТИ НА САЙТ - СКРИПТЫ,ПЛАГИНЫ,СОФТ.

Продам доска объявлений маркетплейс Joysale letro v 4.2.6 nulled / лицензия + apk + ios или меняю его на Tamaranga 2.4.6 nulled / лицензия

demo https://yulavito.ru

clapping БЕСПЛАТНО! ПРЕМИУМ ТЕМЫ и ПЛАГИНЫ на РУССКОМ!. КАЧАЕМ! bomb

Наши баннеры
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Нужна ли категория "Интернет магазины"?

Да
Нет

Архив новостей
Декабрь 2021 (46)
Ноябрь 2021 (404)
Октябрь 2021 (411)
Сентябрь 2021 (336)
Август 2021 (197)
Июль 2021 (110)

Последние комментарии:

Искать людей

Ваши переписки