Дата и время публикации : 27 Сентября 17 в 20:32 | Раздел : Стилизация для uCoz
| Параметр | Значение |
|---|---|
| Дата публик. | 27 Сентября 17, Среда, 20:32 |
| Адапт. дизайн | |
| Обновления | История обновлений |
| Просмотрен | 639 |
Делюсь с вами красивым решением с просто анимированной стилизации 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>
На этом установка закончена.
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияАдаптивная навигация бурно развивалась в веб — дизайне последние пару лет. Дизайнеры как могли упрощали её и делали интуитивно понятно и удоб...
