Возможно многие веб разработчики хотят на сайте иметь оригинальные переключатели или включатели, которые можно создать в красивом дизайн. Теперь можно сделать стильный вид, который состоит из функций включение или отключение. Где после установки в аналогичном случай можно выполнить обратный вызов, который принимает в качестве входного состояния тумблера.
HTML
Код
<div class="container">
<label class="detundsam" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="kaspoden round"></div>
</label>
</div>
CSS
Код
.detundsam {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.detundsam input {
display:none;
}
.kaspoden {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.kaspoden:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .kaspoden {
background-color: #66bb6a;
}
input:checked + .kaspoden:before {
transform: translateX(26px);
}
.kaspoden.round {
border-radius: 34px;
}
.kaspoden.round:before {
border-radius: 50%;
}
Примеры и рекомендации по использованию стилей управления формами, параметров макета и пользовательских компонентов для создания широкого спектра форм.
Демонстрация
