Minimal iOS Style Toggle Switch With CSS Flexbox

Category: Form , Javascript | July 1, 2020
Author:kateapault
Views Total:194 views
Official Page:Go to website
Last Update:July 1, 2020
License:MIT

Preview:

Minimal iOS Style Toggle Switch With CSS Flexbox

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:

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

You Might Be Interested In:


Leave a Reply