.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* esconde o checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #ccc;
transition: .4s;
}
/* bola (knob) */
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: .4s;
/* ícone LOCK “OFF” dentro da bola */
/*background-image: url("data:image/svg+xml;utf8,\");*/
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
/* estados */
input:checked + .slider {
background-color: #f07a5e; /* Alterar para cor selecionada pelo cliente*/
}
input:focus + .slider {
box-shadow: 0 0 1px #f07a5e; /* Alterar para cor selecionada pelo cliente*/
}
input:checked + .slider:before {
transform: translateX(26px);
/* ícone “ON” dentro da bola */
/*background-image: url("data:image/svg+xml;utf8,");*/
background-image: url("data:image/svg+xml;utf8,\");
}
/* arredondado */
.slider.round {
border-radius: 34px;
}