iOS風のオン/オフスイッチ。checkbox+擬似要素+transitionの組み合わせで、ノブの移動に弾みを付けます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
checkboxはdisplay: noneではなくopacity: 0で「見えないが存在する」状態にしています（キーボードフォーカスを受けられるように）。ノブの移動はleftではなくtranslateで行い、少しオーバーシュートするcubic-bezierで「カチッ」とした手応えを演出します。:focus-visible時のoutlineをトラック側に描くことで、キーボード操作でも現在位置が分かります。
実務ではrole="switch"とaria-checkedの利用も検討してください。フォーム部品の色だけ変えたい場合はaccent-colorという1行の選択肢もあります。