Minimal iOS Style Toggle Switch With CSS Flexbox

Preview:

Description:

A minimal clean iOS-style toggle switch built using HTML checkbox input and pure CSS.

Fully responsive and flexible based on CSS flexbox.

See Also:

• 10 Best Toggle Switch JavaScript And CSS Libraries

How to use it:

1. Create a normal HTML checkbox along with a label element on the webpage.

<input type="checkbox" id="example"/>
<label for="example" class="toggle">
  <div class="slider"></div>
</label>

2. The core CSS styles to convert the checkbox into a iOS style toggle switch.

.toggle {
  background-color: grey;
  width: 60px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.toggle-active {
  background-color: blue;
  width: 60px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
input {
  display: none;
}
.slider {
  height: 24px;
  width: 24px;
  background-color: white;
  border-radius: 12px;
  margin: 4px;
}
input:checked + .toggle {
  background-color: green;
}
input:checked + .toggle > .slider {
  align-self: flex-end;
}