input toggle

by JakobJingleheimer

HTML

<input
  indeterminate="restricted"
  name="accessType"
  type="checkbox"
  variant="toggle"
  value="open"
/>

CSS

html {
  font-size: 200%;
}

body {
  margin: 1rem;
}

input[variant="toggle"] {
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  background-color: #eee;
  border-radius: 1rem;
  display: inline-flex;
  flex-direction: row;
  height: 1rem;
  justify-content: center;
  width: 2rem;
}

input[variant="toggle"]:after {
  align-self: flex-end;
  background-color: #aaa;
  border-radius: 100%;
  content: '';
  display: inline-block;
  height: 100%;
  width: 50%;
  transform: translateX(-50%);
  transition:
    background-color 0.5s ease-in-out,
    transform 0.5s ease-in-out;
}
input[variant="toggle"]:checked:after {
  background-color: blue;
  transform: translateX(50%);
}