iPhone Checkbox with CSS

Web applications can minimize effort and streamline work by keeping track of your changes in real-time. Of, course this unique approach to productivity calls for unique user interface elements. Say you have a form that saves an on-off, true-false, or boolean value automatically. A sliding iPhone-style toggle might just be the thing you need. My web app development services include beautiful and productive design accents like this. Just build the HTML and apply the CSS below!

index.html

<label>
  <input
    type="checkbox"
  />
  <span className="slider" />
</label>

style.css

label {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
label input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--blue2);
    transition: .3s;
    border-radius: 20px;
    height: 10px;
}
.slider:before {
    position: absolute;
    top: -5px;
    content: "";
    height: 20px;
    width: 20px;
    background-color: var(--link);
    transition: .3s;
    border-radius: 20px;
}
input:checked + .slider:before {
    transform: translateX(20px);
}