Хаки и Скрипты Next Generation CMS : CSS, Интерфейс : Вот пришлось сменить стиль чекбоксов.

irbees2008 Опубликовано - 27 - декабря CSS

Адаптировал: 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);
}

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

Можешь почитать и вот эту статейку "Изменяем scrollbar без использование javascript"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.