Toggle Button (Radio)

by kthornbloom

HTML

<label for="toggle">
<input type="checkbox" id="toggle">
Do it
</label>

<br><br>
<input type="text">

CSS

label:has(#toggle){
  &::before {
    content:'';
    display: inline-block;
    width: 2rem;
    height: 1rem;
    background: radial-gradient(circle, black 35%, #ccc 35%);
    background-size: 2rem 1rem;
    background-position: -.5rem center;
    border-radius: 50px;
    transition: .2s;
    vertical-align: middle;
  }
}

label:has(#toggle:focus-visible)::before {
  outline: 2px solid blue;
  outline-offset: 2px;
}

label:has(#toggle:checked)::before {
  background: radial-gradient(circle, white 35%, green 35%);
    background-position: .5rem center;
}

#toggle {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}