Стилизация CheckBox в настройках пользователя - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Делюсь с вами красивым решением с просто анимированной стилизации Checkbox в настройках пользователя. (Работает только в настройках пользователя, на страницах добавления материала работать не будет)

Заходим в пенель управления, Страница редактирования данных пользователя и вставляем перед /head :

Код
<style>
   
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font: 14px 'PT Sans', Arial, sans-serif;  
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #1976D2;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>


На этом установка закончена.

Источник: 7uarts.ga

Важно!

При копировании материала указывать ссылку на источник.

- 568
- 01-Ноября-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта