• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Изменить вид checkbox в личных данных для uCoz
Изменить вид checkbox в личных данных для uCoz
Kosten
Суббота, 25 Ноября 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
У вас появилась возможность изменить дизайн функций на личных данных, где каждый пользователь может изменить. По умолчанию на конструкторе uCoz установлены стандартные, но после как вы пропишите стили, то все кардинально изменится, в плане визуализация. Изменение только произойдет в опциях пользователя, что безусловно будет смотреться намного стильные и под оригинальные или уникальные шаблоны, будет отличным решением.

Сейчас у вас так идет:



После как пропишите стили, кардинально изменится:



в CSS:

Код
input[type=checkbox] {vertical-align:top;margin:0 3px 0 0;width:17px;height:17px;}  
input[type=checkbox]:not(checked),input[type=radio]: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:#FF8F8F;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: #68C3A3;}  
input[type=checkbox]:checked + label:after {left: 26px;}  
input[type=radio]:not(checked) + label {position: relative;padding: 0px 0px 0px 30px;}  
input[type=radio]:not(checked) + label:before {content:'';position:absolute;top:-4px;left:2px;width:22px;height:22px;border:1px solid #55A086;border-radius:50%;background: #FFF;}  
input[type=radio]:not(checked) + label:after {content:'';position:absolute; top:-3px;left:3px;width:22px;height:22px;border-radius:50%;background:#68C3A3;box-shadow:inset 0 1px 1px rgba(0,0,0,.5);opacity:0;transition:all 0.3s;}  
input[type=radio]:checked + label:after {opacity:1;}  
label {line-height: 30px;}


Автор: uGarts
Прикрепления: 7823195.png (10.5 Kb) · 9664523.png (12.2 Kb)
Страна: (RU)
Kosten
Суббота, 25 Ноября 2017 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Что также в окне все инструменты по дизайн изменяются.

Страна: (RU)
-SAM-
Воскресенье, 26 Ноября 2017 | Сообщение 3
Оффлайн
Друзья сайта
Сообщений:880
Награды: 40
Цитата Kosten ()
Автор: uGarts
Не автор, аналогично как и здесь - стили взяты из сети.
Цитата Kosten ()
Что также в окне все инструменты по дизайн изменяются.
Из-за того, что стили были подключены ко всему сайту, а не к странице или же переписаны под идентификатор (например, на странице нужной в блоке, в котором находятся эта форма редактирования, прописать id="checkedit", потом перед стилями этими писать #checkedit, чтобы можно было в общую таблицу стилей подключать и(или) не видоизменяло другие чекбоксы - по сайту или же где-то в другом месте на выбранной странице).




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Воскресенье, 26 Ноября 2017, 14:26
Страна: (UA)
Форум » Веб-разработка » HTML + CSS — коды » Изменить вид checkbox в личных данных для uCoz
  • Страница 1 из 1
  • 1
Поиск: