Хаки и Скрипты Next Generation CMS

Делаем красивый чек бокс или радио кнопки

irbees2008 irbees2008 Опубликовано - 15 - января CSS
4296 - 0
  • Автор: pepelsbey
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Сегодня показываю пример изменения кнопок чек бокса и радио кнопки.
1.Первый вариант это чекбокс ,вот сам HTML код нашей формы с чек боксом

Код:
<div class="switch">
<input type="checkbox" checked="" id="switch-1" class="switch-check">
<label for="switch-1" class="switch-label">
Опция
<span class="switch-slider switch-slider-on"></span>
<span class="switch-slider switch-slider-off"></span>
</label>
</div>
2.Вот стили для него
Код:
/* Switch */
.switch,
.switch-label,
.switch-slider {
width:154px;
height:54px;
}
.switch {
position:relative;
display:inline-block;
margin:0 50px 50px 0;
}
.switch-check {
position:absolute;
opacity:0;
}
.switch-label,
.switch-slider {
position:absolute;
top:0;
}
.switch-label {
left:0;
text-indent:-9999px;
}
.switch-slider {
border-radius:27px;
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1) inset,
0 0 4px rgba(0, 0, 0, 0.5) inset,
0 5px 4px 1px rgba(0, 0, 0, 0.3) inset,
0 27px 0 rgba(0, 0, 0, 0.07) inset;
-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;
}
.switch-slider-on {
left:0;
width:54px;
background:#369AEE url(../images/on.svg) 100% 12px no-repeat;
}
.switch-slider-off {
right:0;
background:#FFF url(../images/off.svg) 86px 14px no-repeat;
}
.switch-slider-off:after {
position:absolute;
top:1px;
left:1px;
width:52px;
height:52px;
border-radius:50%;
background:#E5E5E5;
background:-webkit-linear-gradient(#D0D0D0, #FDFDFD);
background:-moz-linear-gradient(#D0D0D0, #FDFDFD);
background:-o-linear-gradient(#D0D0D0, #FDFDFD);
background:linear-gradient(#D0D0D0, #FDFDFD);
box-shadow:
0 0 2px 2px #FFF inset,
0 0 4px 1px rgba(0, 0, 0, 0.6);
content:'';
}
.switch-label:active .switch-slider-off:after,
.switch-check:focus + .switch-label .switch-slider-off:after {
background:#D5D5D5;
background:-webkit-linear-gradient(#C8C8C8, #E4E4E4);
background:-moz-linear-gradient(#C8C8C8, #E4E4E4);
background:-o-linear-gradient(#C8C8C8, #E4E4E4);
background:linear-gradient(#C8C8C8, #E4E4E4);
}
.switch-check:checked + .switch-label .switch-slider-on {
width:154px;
}
.switch-check:checked + .switch-label .switch-slider-off {
width:54px;
}
Ну с этим все вот исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Вариант два с радио кнопкой
1. Сам HTML нашей кнопки
Код:
<fieldset class="switch">
<input type="radio" checked="" name="switch-1" id="switch-radio-off-1" class="switch-radio switch-radio-off">
<label for="switch-radio-off-1" class="switch-label switch-label-off">
Выкл.
<span class="switch-slider"></span>
</label>
<input type="radio" name="switch-1" id="switch-radio-on-1" class="switch-radio switch-radio-on">
<label for="switch-radio-on-1" class="switch-label switch-label-on">
Вкл.
<span class="switch-slider"></span>
</label>
</fieldset>
2.И стили
Код:
/* Switch */
.switch,
.switch-label,
.switch-slider {
width:154px;
height:54px;
}
.switch {
position:relative;
display:inline-block;
margin:0 50px 50px 0;
padding:0;
border:none;
}
.switch-radio {
position:absolute;
visibility:hidden;
}
.switch-label,
.switch-slider {
position:absolute;
top:0;
}
.switch-label {
left:0;
text-indent:-9999px;
}
.switch-slider {
z-index:2;
width:154px;
border-radius:27px;
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1) inset,
0 0 4px rgba(0, 0, 0, 0.5) inset,
0 5px 4px 1px rgba(0, 0, 0, 0.3) inset,
0 27px 0 rgba(0, 0, 0, 0.07) inset;
-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;
}
.switch-slider:after {
position:absolute;
top:1px;
width:52px;
height:52px;
border-radius:50%;
background:#E5E5E5;
background:-webkit-linear-gradient(#D0D0D0, #FDFDFD);
background:-moz-linear-gradient(#D0D0D0, #FDFDFD);
background:-o-linear-gradient(#D0D0D0, #FDFDFD);
background:linear-gradient(#D0D0D0, #FDFDFD);
box-shadow:
0 0 2px 2px #FFF inset,
0 0 4px 1px rgba(0, 0, 0, 0.6);
content:'';
}
.switch-label-on .switch-slider {
left:0;
background:#369AEE url(../images/on.svg) 100% 12px no-repeat;
}
.switch-label-on .switch-slider:after {
right:1px;
}
.switch-label-off .switch-slider {
right:0;
background:#FFF url(../images/off.svg) 86px 14px no-repeat;
}
.switch-label-off .switch-slider:after {
left:1px;
}
.switch-label:active .switch-slider:after {
background:#D5D5D5;
background:-webkit-linear-gradient(#C8C8C8, #E4E4E4);
background:-moz-linear-gradient(#C8C8C8, #E4E4E4);
background:-o-linear-gradient(#C8C8C8, #E4E4E4);
background:linear-gradient(#C8C8C8, #E4E4E4);
}
.switch-radio:checked + .switch-label .switch-slider {
z-index:1;
width:54px;
}
.switch-radio:checked + .switch-label .switch-slider:after {
visibility:hidden;
}
Вот исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Все выглядит красиво и работает,пользуемся.

Можешь почитать и вот эту статейку "Опять не работает Флеш кнопка,достало!!!!"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [10]
  • Гости: [10]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 33
  • Генерация страницы: 0.365сек
  • Потребление памяти: 5.272 Mb 
  •   Яндекс.Метрика