css checkbox swich

<div>
<p>
    <input id="swich" type="checkbox" name="keep1">
    <label for="swich"></label> on/off
</p>
</div>
<style>
div > p > input {display: none;}
div > p > label {width: 80px; height: 40px; background: #ddd; display: inline-block; border-radius: 20px; padding: 2px; transition: .5s;}
div > p > input:checked + label {background: rgb(13, 230, 96);}
div > p > input:checked + label::before {transform: translateX(100%);}
div > p > label::before {content: ''; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: inline-block; transition: .5s;}
</style>

인풋은 숨겨놓고 라벨 디자인으로 ON/OFF 모양 그려줌