CSS实现的ios样式Toggle开关按钮

一款很轻的iOS样式开关小部件，使用纯CSS代码实现的HTML复选框，基于CSS flexbox充分响应和灵活。

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