Главная » Раздел uCoz » Скрипты и модификации для Ucoz


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

1609
8.8 из 10
Проголосовало: 33






Новый вид 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;}
Автор публикации: Загрузка
Загрузка
CbIPoK2513, это его n-й материал
Источник: http://pandora.clan.su/
Ваше мнение о материале Загрузка
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2126
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 432
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Гость, авторизуйся и общайся в чате...
Последние комментарии
  • geleson2222 написал:
    • ?
  • Doc120 написал:
    • /* Скрывает каперайт ucoz */
    .banner_u {
    opacity:0.2 ;
    }
    /* ----------------- */
    opacity:0.1 ; это легальное скрытее $POWERED_BY$
    ставим в ccs не ставте 0.0 тоже за банят 1.1 можно сам пользуюсь.
  • Doc120 написал:
    • Ставим в ccs и все
    /* Скрывает каперайт ucoz */
    .banner_u {
    opacity:0.2 ;
    }
    /* ----------------- */
  • topkalife написал:
    • Было бы лучше если бы данный скрипт работал)
  • k43 написал:
    • Возможно из-за капчи для пользователей
    Последние темы
    Опрос
    537
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    		 0
    наших
    		 0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Друзья сайта:
    Связаться с администратором для дружбы! В Вовчик
    Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94
    Web-мастер системы uCoz R Roman_Domnin
    Связаться с администратором для дружбы! В Вовчик
    Связаться с администратором для дружбы! В Вовчик
    Топ пользователей: