Новый вид checkbox и radiobutton для uCoz
Описание:
Дорогие друзья, представляю вашему вниманию "Новый вид checkbox и radiobutton для uCoz", очень красиво смотрится, быстрая анимация при нажатии кнопки, лично им пользуюсь и всем советую!
Данный вид стилей я предпочёл вставил в Страницу редактирования и добавления материалов
Немного о плюсах и минусах данного метода
- Неограниченные возможности в стилизации при помощи CSS
- В браузерах старых версий и IE 8 и ниже версий отображения может не корректно что минус, но и сохранить стандартный, не портя вид что большой плюс. Совсем старые браузеры селекторы с плюсами не поддерживают, а так же :not и :checked
- Код малый что плюс
- Обязательна последовательность тегов
- Наличие bootstrap'a скажется на позиционировании. и придется утрудиться в CSS
Дорогие друзья, представляю вашему вниманию "Новый вид checkbox и radiobutton для uCoz", очень красиво смотрится, быстрая анимация при нажатии кнопки, лично им пользуюсь и всем советую!
Данный вид стилей я предпочёл вставил в Страницу редактирования и добавления материалов
Код
<style>
/*----Checkbox и 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;}
/*----Checkbox и Radio стилизация от uGarts-----*/
</style>
/*----Checkbox и 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;}
/*----Checkbox и Radio стилизация от uGarts-----*/
</style>
Немного о плюсах и минусах данного метода
- Неограниченные возможности в стилизации при помощи CSS
- В браузерах старых версий и IE 8 и ниже версий отображения может не корректно что минус, но и сохранить стандартный, не портя вид что большой плюс. Совсем старые браузеры селекторы с плюсами не поддерживают, а так же :not и :checked
- Код малый что плюс
- Обязательна последовательность тегов
- Наличие bootstrap'a скажется на позиционировании. и придется утрудиться в CSS
#checkbox, #radiobuttom, #ucoz
Комментарии
0 комментариев
Материал «Новый вид checkbox и radiobutton для uCoz» ещё никто не комментировал.
Для добавления комментариев необходима авторизация.
