Разместить объявление
хостинг
VIPAdmin / CMS / uCoz / uCoz модули / Новый вид CheckBox'ов

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



Установка:
Добавить этот код туда, где должен быть 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;}

Еще немного интересного

Способы заработка / Статьи Сайты с бесплатной накруткой TikTok | YouTube
Криптовалюта / Статьи Второй username в тг | Работа с fragment
Способы заработка / Статьи ЗАРАБОТОК НА YouTube
Криптовалюта / Статьи Как избежать бана на Binance
Раскрутка соц. сетей / Статьи Обучение по трафику с ТикТок. Июль 2021
Статьи / Другое Почему важен дизайн?
Статьи / Другое Запускаем AI стрим на Twitch
Статьи / Другое БЕСПЛАТНАЯ КАРТА «Zelf»
Статьи / Другое Поисковик файлов by DeCoded
Статьи / Безопасность [SIM]Спамблок без заморочек.
Способы заработка / Статьи / Арбитраж трафика Заработок на арбитраже трафика 💎💸
Сервисы / Парсинг A-PARSER - парсер сайтов № 1
Сервисы / Сервера и хостинги Хостинг PrivateAlps (Игнорирует DMCA)
Сервисы / Платёжные системы Merchant001- надежный эквайринг для сайта
Статьи Дорвеи 2023-2024
Арбитраж трафика / Статьи Арбитраж трафика на пуш уведомлениях
Статьи / Софт / Антидетект Браузеры ТОП ЛУЧШИХ АНТИДЕТЕКТ БРАУЗЕРОВ 2023
Сервисы / Трекеры / Клоака Keitaro PRO - трекер для арбитража трафика
Хостинг / Скрипты сайтов / Статьи Как настроить работу почты
Хостинг / Скрипты сайтов / Статьи Урок доступ mysql с любого ip
Хостинг / Скрипты сайтов / Статьи Как сделать моментальную установку сервера? HOSTINPL
Хостинг / Статьи Exim (Восстановление по e-mail)
Скрипты сайтов / Статьи JavaScript - Меняем CSS

Отзывы (0)