Вид checkbox и radio для uCoz
827материалов
228тем на форуме
3003комментария
6152пользователя

Вид checkbox и radio для uCoz


Описание:

Начну с того что долго голову не ломал, и велосипед придумывать не пришлось, т.к. в интернете есть кучу способов замену checkbox, есть те кто изменяют их через js плагины, но это я считаю старым способом, поэтому проще оформить все в CSS. Смысл CSS кода состоит в том что при использовании :checked и :not, в начале CSS кода скрываются chebox и radiobutton. Кнопки выполнены в зелен стиле (если она активна), а если пассивна, то серый цвет. В материале присутствует демонстрация кнопок checkbox и radio. Установка очень проста, надо просто наш код вставить в Ваш CSS

Установка:

В таблицу стилей (CSS) вставляете код:
Код
input[type=checkbox]:not(checked),input[type=radio]:not(checked){position:absolute;opacity:0;}
input [type=checkbox]{vertical-align: top;width: 17px;height: 17px;margin: 0 3px 0 0;}
input [type=checkbox]+ label {cursor: pointer;}
input[type=checkbox]:not(checked) {position: absolute;opacity: 0;}
input[type=checkbox]:not(checked) + label {position: relative;padding: 0 0 0 60px;}
input[type=checkbox]:not(checked) + label:before {content: '';position: absolute;top: -4px;left: 0;width: 50px;height: 26px;border-radius: 13px;background: #CDD1DA;box-shadow: inset 0 2px 3px rgba(0,0,0,.2);}
input[type=checkbox]:not(checked) + label:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: all 0.3s;}
input[type=checkbox]:checked + label:before {background: #9FD468;}
input[type=checkbox]:checked + label:after {left: 26px;}
input[type=checkbox]:focus + label:before {box-shadow: 0 0 0 3px rgba(255,255,0,.5);}
input [type=radio]{vertical-align: top;width: 17px;height: 17px;margin: 0 3px 0 0;}
input [type=radio]+ label {cursor: pointer;}
input[type=radio]:not(checked) {position: absolute;opacity: 0;}
input[type=radio]:not(checked) + label {position: relative;padding: 0 0 0 35px;}
input[type=radio]:not(checked) + label:before {content: '';position: absolute;top: -3px;left: 0;width: 22px;height: 22px;border: 1px solid #CDD1DA;border-radius: 50%;background: #FFF;}
input[type=radio]:not(checked) + label:after {content: '';position: absolute;top: 1px;left: 4px;width: 16px;height: 16px;border-radius: 50%;background: #9FD468;box-shadow: inset 0 1px 1px rgba(0,0,0,.5);opacity: 0;transition: all .2s;}
input[type=radio]:checked + label:after {opacity: 1;}
input[type=radio]:focus + label:before {box-shadow: 0 0 0 3px rgba(255,255,0,.5);}
label {line-height:30px;}

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 21.09.2016 в 13:00
Материал просмотрен: 1846 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 6 комментариев

Пожаловаться
Сказать спасибо
Источник

6 комментариев


Umbrella
Umbrella corporation @Umbrella 24.09.2015 23:461
-5
Розовый получше, но эти тоже не плохо выглядят clown
Roman
Роман Сергеев @Roman 25.09.2015 15:112
+2
Красиво, но да, розовые лучше чем зеленые
avatar
Здравствуйте, спасибо Вам огромное за чудесные скрипты like
Admin
Роман Домнин @Admin 12.10.2015 11:514
+2
Пожалуйста!
iMadeas
Madeas Gaming @iMadeas 22.09.2016 11:065
+1
Очень полезный и стильный скрипт, спасибо. Ваш сайт нравится больше чем ура =)
Ромчик
И Вам спасибо за такой тёплый отзыв!
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта