• 142
  • 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);
}

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

Можешь почитать и вот эту статейку "Протокол Open Graph"

mistakes

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

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

Ваше мнение

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

----