Pure CSS iOS Switch Toggle Button Using Checkbox Input

CSS3 iOS Switch Button is a pure CSS component that turns a native checkbox into an iOS-style on/off toggle.

It uses label and checkbox markup, hides the checkbox visually, and animates the track and handle with CSS transforms and transitions.

Ideal for settings panels, mobile-inspired forms, and preference controls that need a large switch button with no JavaScript dependency.

How to use it:

1. Create a checkbox input for the toggle switch.

<label class="switch">
  <input type="checkbox" checked>
  <span></span> 
</label>

2. The primary CSS/CSS3 for the switch.

label.switch {  
  text-align: left;
  width: 150px;
  height: calc(150px / 2);
  border-radius:60px;    
  background-color:#4ed164;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

label.switch > span {
  display: block;
  width: 100%;
  height: 100%;
}

label.switch > input[type="checkbox"] {
  opacity: 0;
  position: absolute;
} 

label.switch > span:before, label.switch > span:after {
  content: "";
  cursor: pointer;
  position: absolute;
}

label.switch > input[type="checkbox"]:focus ~ span {
  box-shadow: 0 0 0 4px #43b556; 
}

label.switch > input[type="checkbox"]:checked:focus ~ span {
  box-shadow: 0 0 0 4px #fff;
}

label.switch > span {
  border-radius: 60px;    
}

label.switch > span:before {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
  transform: scale(1);
  opacity: 1;
}

label.switch > span:after{
  top: 50%;
  z-index: 3;
  transition: transform .4s cubic-bezier(0.44,-0.12, 0.07, 1.15);
  width: calc(150px / 2);
  height: calc(150px / 2);
  transform: translate3d(0, -50%, 0);
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);  
}

3. Animate the switch when checked.

label.switch > input[type="checkbox"]:checked ~ span:before {
  transform: scale(0);
  opacity: .7;
}

label.switch > input[type="checkbox"]:checked ~ span:after {
  transform: translate3d(100%, -50%, 0);
}

Implementation Tips:

• Keep the checkbox inside the label so clicks on the track and handle update the checked state.
• Add visible label text or an aria-label when the switch appears without nearby text.
• Keep a visible focus style. Keyboard users need a clear focus indicator when the checkbox receives focus.
• Change the track width, track height, and handle size together because the handle position depends on the switch dimensions.

Alternatives:

• Discover More Toggle Switch Libraries
• Simple CSS Toggle Switch Library – a8z
• Customizable Rounded & Square Toggle Switch Web Component
• CSS Only Interactive Toggle Switches – toggle-switch.css
• 10 Best Toggle Switches In JavaScript & Pure CSS

FAQs:

Q: Does this iOS toggle button need JavaScript?
A: No. The checked state comes from the native checkbox, and the visual animation comes from CSS selectors, transforms, and transitions.

Q: Can I use this switch inside a real form?
A: Yes. The control uses an actual checkbox input, so form submission can read the checked or unchecked state.

Q: How do I make the switch smaller?
A: Reduce the switch width, switch height, and handle size together. The handle movement depends on those size values.

The post Pure CSS iOS Switch Toggle Button Using Checkbox Input appeared first on CSS Script.