Issues with styling toggle switch in css/sass - css

Question

I am having some issues I cannot seem to figure out with styling a toggle switch as required. I currently have it like this:
It however needs to look like this:
Here is my HTML:
<label class="switch"><input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
Here is my css:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px!important;
height: 24px!important;
cursor: pointer;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
display: block;
width: 22px!important;
height: 22px!important;
margin: 1px;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 26px;
border-radius: 20px;
transition: margin .3s ease-in 0s;
transition-property: margin;
transition-duration: 0.3s;
transition-timing-function: ease-in;
transition-delay: 0s;
box-shadow: 1px 2px 7px #444;
}
input:checked + .slider {
background-color: #236093;
}
input:focus + .slider {
box-shadow: 0 0 1px #236093;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
Not sure where I am going wrong here or what I need to adjust. I have tried changing the transform and the padding but I cannot seem to get it right.

Answer 1

You can use the following solution:
.switch {
cursor: pointer;
display: inline-block;
height: 24px;
position: relative;
width: 50px;
overflow:hidden;
}
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.slider {
background: #ccc;
bottom: 0;
cursor: pointer;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
background: #fff;
border-radius: 50%;
bottom: 1px;
box-shadow: 3px 0px 7px #444;
content: "";
display: block;
height: 22px;
left: 1px;
position: absolute;
right: 50px;
top: 1px;
width: 22px;
transition-property: all;
transition-duration: .6s;
}
input:checked + .slider {
background: #236093;
}
input:checked + .slider:before {
box-shadow: -3px 0px 7px #002551;
left: calc(100% - 23px); /** width of .slider:before + 1px */
}
.slider.round {
border-radius: 24px;
}
<label class="switch">
<input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>