/* Hide the checkbox itself */ .lp-checkbox { opacity: 0; position: absolute; pointer-events: none; } /* Make the toggle-label inline-block so the slider can be clicked */ .toggle-label { display: inline-block; position: relative; cursor: pointer; user-select: none; } /* Toggle container & styling */ .lp_toggle_container { display: inline; } .lp_toggle { display: inline-grid; border-radius: 4px; overflow: hidden; position: relative; width: 100px; /* adjust width as needed */ height: 30px; } /* Moving slider handle */ .lp_toggle::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 46%; background-color: #fff; border-radius: 2px; transition: 0.2s all; z-index: 1; } /* Both choices always visible */ .lp_toggle__choice { grid-column: 1 / 2; grid-row: 1 / 2; text-align: center; line-height: 30px; font-family: sans-serif; font-size: 14px; color: white; transition: font-weight 0.2s; } /* "No" side */ .lp_toggle__choice--off { justify-self: start; padding-left: 10px; background-color: grey; } /* "Yes" side */ .lp_toggle__choice--on { justify-self: end; padding-right: 10px; background-color: green; } /* Bold the active option */ .lp-checkbox:checked + .lp_toggle_container .lp_toggle__choice--on { font-weight: bold; } .lp-checkbox:not(:checked) + .lp_toggle_container .lp_toggle__choice--off { font-weight: bold; } /* Move slider to right when checked */ .lp-checkbox:checked + .lp_toggle_container .lp_toggle::before { left: 52%; }