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

Вот пришлось сменить стиль чекбоксов.

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

Всем привет. Один из пользователей написал в обратную связь что не может зарегистрироваться на сайте, не отображаются чекбоксы. Ну я проверил , и точно в лисе не отображаются мои чекбоксы. Ну решил сменить вообще их на другой вид ,надоели галочки. Покопавшись в архивах обнаружил довольно интересный вариант.
Я не буду заострять внимание как и почему, просто ставим
И так приступим:

Там где должны быть чекбоксы добавляем:

Код:
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">переключатель чекбокса</label>

<input type="radio" class="radio" id="radio" />
<label for="radio">А я переключаю радиокнопку</label>
Важно, чтобы тег <label> был расположен после тега <input>.

Далее добавляем стили в файл стилей вашего шаблона:
Это для чекбоксов
Код:
.checkbox {
vertical-align: top;
margin: 0 3px 0 0;
width: 17px;
height: 17px;
}
.checkbox + label {
cursor: pointer;
}

.checkbox:not(checked) {
position: absolute;
opacity: 0;
}
.checkbox:not(checked) + label {
position: relative;
padding: 0 0 0 60px;
}
.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);
}
.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 .2s;
}
.checkbox:checked + label:before {
background: #9FD468;
}
.checkbox:checked + label:after {
left: 26px;
}
.checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}

Вот стили для радиокнопки :
Код:
.radio {
vertical-align: top;
width: 17px;
height: 17px;
margin: 0 3px 0 0;
}
.radio + label {
cursor: pointer;
}
.radio:not(checked) {
position: absolute;
opacity: 0;
}
.radio:not(checked) + label {
position: relative;
padding: 0 0 0 35px;
}
.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;
}
.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;
}
.radio:checked + label:after {
opacity: 1;
}
.radio:focus + label:before {
box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}

Вот и все пользуемся, все просто.

Можешь почитать и вот эту статейку "Стильные кнопки-переключатели при помощи CSS3"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 0.123сек
  • Потребление памяти: 4.941 Mb 
  •   яндекс.ћетрика