<input class="wtoggle__input" type="checkbox" id="wtoggle">
<label for="wtoggle" class="wtoggle"></label>
.wtoggle__input {
  /* hide visually*/
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.wtoggle {
  --width: 50px;
  --height: calc(var(--width) / 2);
  --border-radius: calc(var(--height) / 2);
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  background: #dddddd;
  border: 1px solid #dddddd;
  transition: background 0.2s;
}
.wtoggle__input:checked ~ .wtoggle {
  background: #2271b1;
  border: 1px solid #2271b1;
}
.wtoggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--height);
  width: var(--height);
  background: #ffffff;
  border-radius: var(--border-radius);
  transition: transform 0.2s;
}
.wtoggle__input:checked ~ .wtoggle::before {
  transform: translateX(100%);
}
.wtoggle__input:focus ~ .wtoggle {
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}
.wtoggle__input:focus:not(:focus-visible) ~ .wtoggle {
  box-shadow: none;
}
.wtoggle__input:focus-visible ~ .wtoggle {
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.