iPhone Checkbox with CSS

Published

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);
}

Access Two FREE Consultations!

Every tribe needs a strong leader and people are ready to join yours. So, give them the tools they need with my web app development services today.

Web App Development Services
#gayowned  🌈
Web App Development ServicesWeb App Development ServicesWeb App Development ServicesWeb App Development ServicesWeb App Development Services
Web App Development Services

Web App Development Services