Меняем вид chebox и radiobutton для сайтов uCoz
827материалов
228тем на форуме
3003комментария
6154пользователя

Меняем вид chebox и radiobutton для сайтов uCoz


Комментарий создателя решения:

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

Установка решения:

Код
input[type=checkbox]:not(checked),input[type=radio]:not(checked){position:absolute;opacity:0;}
Скрывается за счет селектора opacity:0;, можно использовать и другие способы скрытия как display: none;.А их работа имитируется для тега <label> с помощью:before и :after, так как он привязан за счет атрибута for, что и легко просматривается в коде:

Пример с страницы добавления материалов ucoz модуля Новости сайта
Код
<input id="format_message" type="checkbox" name="format_message" value="1" checked=""><label for="format_message">Заменять переводы строк тегом <b><BR></b></label>

Не мало важно последовательность в коде тегов <label> и <input>

Теперь сам код который вы вставите в свои стили CSS
Код
/*----Chebox и Radio стилизация от uGarts-----*/                  
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;}                  
/*----Chebox и Radio стилизация от uGarts-----*/

Немного о плюсах и минусах данного метода:
  • Неограниченные возможности в стилизации при помощи CSS
  • В браузерах старых версий и IE 8 и ниже версий отображения может не корректно что минус, но и сохранить стандартный не портя вид что большой плюс. Совсем старые браузеры селекторы с плюсами не поддерживают, а так же :not и :checked
  • Код малый что плюс
  • Обязательна последовательность тегов
  • Наличие bootstrap'a скажется на позиционировании. и придется утрудиться в CSS

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

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

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

3 комментария


TheGamer
MaxiMus @TheGamer 09.08.2015 11:121
+1
like
Иван Плотников 10.08.2015 11:472
-1
Ссылка битая
Romchik
Роман @Romchik 10.08.2015 13:363
+1
Демо работает только с полной версии а не с мобильной
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта