2838
- 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);
}Вот и все пользуемся, все просто.
Можешь почитать и вот эту статейку "HTML теги address"
Это тоже интересно
27.03.1517 лучших генераторов кода CSS3
04.01.14Изменяем вид цитат
29.11.14Справочник по HTML,CSS
29.06.17Будем фиксировать менюшку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.