2658
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Всем привет. Один из пользователей написал в обратную связь что не может зарегистрироваться на сайте, не отображаются чекбоксы. Ну я проверил , и точно в лисе не отображаются мои чекбоксы. Ну решил сменить вообще их на другой вид ,надоели галочки. Покопавшись в архивах обнаружил довольно интересный вариант.
Я не буду заострять внимание как и почему, просто ставим
И так приступим:
Там где должны быть чекбоксы добавляем:
Код:
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">переключатель чекбокса</label>
<input type="radio" class="radio" id="radio" />
<label for="radio">А я переключаю радиокнопку</label>
Далее добавляем стили в файл стилей вашего шаблона:
Это для чекбоксов
Код:
.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);
}Вот и все пользуемся, все просто.
Можешь почитать и вот эту статейку "Подсветка синтаксиса в статьях"
Это тоже интересно
27.03.1517 лучших генераторов кода CSS3
04.01.14Изменяем вид цитат
29.11.14Справочник по HTML,CSS
29.06.17Будем фиксировать менюшку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.